fix: prevent memory from opening when delete memory dialog is open (#582)

5 files changed, 43 insertions, 25 deletions

diff --git a/apps/web/components/content-cards/google-docs.tsx b/apps/web/components/content-cards/google-docs.tsx
index 0306876d..6b44a064 100644
--- a/apps/web/components/content-cards/google-docs.tsx
+++ b/apps/web/components/content-cards/google-docs.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { useState } from "react"
 import { Card, CardContent } from "@repo/ui/components/card"
 import { Badge } from "@repo/ui/components/badge"
 import {
@@ -41,11 +42,15 @@ export const GoogleDocsCard = ({
 	activeMemories,
 	lastModified,
 }: GoogleDocsCardProps) => {
+	const [isDialogOpen, setIsDialogOpen] = useState(false)
+
 	const handleCardClick = () => {
-		if (onClick) {
-			onClick()
-		} else if (url) {
-			window.open(url, "_blank", "noopener,noreferrer")
+		if (!isDialogOpen) {
+			if (onClick) {
+				onClick()
+			} else if (url) {
+				window.open(url, "_blank", "noopener,noreferrer")
+			}
 		}
 	}
 
@@ -68,7 +73,7 @@ export const GoogleDocsCard = ({
 			}}
 		>
 			{onDelete && (
-				<AlertDialog>
+				<AlertDialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
 					<AlertDialogTrigger asChild>
 						<button
 							className="absolute top-2 right-2 z-20 opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-md hover:bg-red-500/20"
@@ -85,7 +90,7 @@ export const GoogleDocsCard = ({
 							<Trash2 className="w-3.5 h-3.5" />
 						</button>
 					</AlertDialogTrigger>
-					<AlertDialogContent>
+					<AlertDialogContent onClick={(e) => e.stopPropagation()}>
 						<AlertDialogHeader>
 							<AlertDialogTitle>Delete Document</AlertDialogTitle>
 							<AlertDialogDescription>
diff --git a/apps/web/components/content-cards/note.tsx b/apps/web/components/content-cards/note.tsx
index b0014bf6..5fd6f740 100644
--- a/apps/web/components/content-cards/note.tsx
+++ b/apps/web/components/content-cards/note.tsx
@@ -15,6 +15,7 @@ import {
 import { colors } from "@repo/ui/memory-graph/constants"
 import { Brain, ExternalLink, Trash2 } from "lucide-react"
 import { cn } from "@lib/utils"
+import { useState } from "react"
 import {
 	formatDate,
 	getPastelBackgroundColor,
@@ -45,12 +46,16 @@ export const NoteCard = ({
 	onOpenDetails,
 	onDelete,
 }: NoteCardProps) => {
+	const [isDialogOpen, setIsDialogOpen] = useState(false)
+
 	return (
 		<Card
 			className="w-full p-4 transition-all cursor-pointer group relative overflow-hidden gap-2 shadow-xs"
 			onClick={() => {
-				analytics.documentCardClicked()
-				onOpenDetails(document)
+				if (!isDialogOpen) {
+					analytics.documentCardClicked()
+					onOpenDetails(document)
+				}
 			}}
 			style={{
 				backgroundColor: getPastelBackgroundColor(
@@ -59,7 +64,7 @@ export const NoteCard = ({
 				width: width,
 			}}
 		>
-			<AlertDialog>
+			<AlertDialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
 				<AlertDialogTrigger asChild>
 					<button
 						className="absolute top-2 right-2 z-20 opacity-0 group-hover:opacity-100 group-hover:cursor-pointer transition-opacity p-1.5 rounded-md hover:bg-red-500/20"
@@ -76,7 +81,7 @@ export const NoteCard = ({
 						<Trash2 className="w-3.5 h-3.5" />
 					</button>
 				</AlertDialogTrigger>
-				<AlertDialogContent>
+				<AlertDialogContent onClick={(e) => e.stopPropagation()}>
 					<AlertDialogHeader>
 						<AlertDialogTitle>Delete Document</AlertDialogTitle>
 						<AlertDialogDescription>
diff --git a/apps/web/components/content-cards/tweet.tsx b/apps/web/components/content-cards/tweet.tsx
index 34db9eb5..b2599770 100644
--- a/apps/web/components/content-cards/tweet.tsx
+++ b/apps/web/components/content-cards/tweet.tsx
@@ -1,4 +1,4 @@
-import { Suspense } from "react"
+import { Suspense, useState } from "react"
 import type { Tweet } from "react-tweet/api"
 import {
 	type TwitterComponents,
@@ -88,6 +88,8 @@ export const TweetCard = ({
 	activeMemories?: Array<{ id: string; isForgotten?: boolean }>
 	onDelete?: () => void
 }) => {
+	const [isDialogOpen, setIsDialogOpen] = useState(false)
+
 	return (
 		<div
 			className="relative transition-all group"
@@ -98,7 +100,7 @@ export const TweetCard = ({
 			<CustomTweet components={{}} tweet={data} />
 
 			{onDelete && (
-				<AlertDialog>
+				<AlertDialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
 					<AlertDialogTrigger asChild>
 						<button
 							className="absolute top-2 right-2 z-20 opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-md hover:bg-red-500/20"
@@ -115,7 +117,7 @@ export const TweetCard = ({
 							<Trash2 className="w-3.5 h-3.5" />
 						</button>
 					</AlertDialogTrigger>
-					<AlertDialogContent>
+					<AlertDialogContent onClick={(e) => e.stopPropagation()}>
 						<AlertDialogHeader>
 							<AlertDialogTitle>Delete Document</AlertDialogTitle>
 							<AlertDialogDescription>
diff --git a/apps/web/components/content-cards/website.tsx b/apps/web/components/content-cards/website.tsx
index f0e614c9..fed79f4a 100644
--- a/apps/web/components/content-cards/website.tsx
+++ b/apps/web/components/content-cards/website.tsx
@@ -42,14 +42,17 @@ export const WebsiteCard = ({
 	showExternalLink = true,
 }: WebsiteCardProps) => {
 	const [imageError, setImageError] = useState(false)
+	const [isDialogOpen, setIsDialogOpen] = useState(false)
 
 	const handleCardClick = () => {
-		if (onClick) {
-			onClick()
-		} else if (onOpenDetails) {
-			onOpenDetails()
-		} else {
-			window.open(url, "_blank", "noopener,noreferrer")
+		if (!isDialogOpen) {
+			if (onClick) {
+				onClick()
+			} else if (onOpenDetails) {
+				onOpenDetails()
+			} else {
+				window.open(url, "_blank", "noopener,noreferrer")
+			}
 		}
 	}
 
@@ -78,7 +81,7 @@ export const WebsiteCard = ({
 			}}
 		>
 			{onDelete && (
-				<AlertDialog>
+				<AlertDialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
 					<AlertDialogTrigger asChild>
 						<button
 							className="absolute top-2 right-2 z-20 opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-md hover:bg-red-500/20"
@@ -95,7 +98,7 @@ export const WebsiteCard = ({
 							<Trash2 className="w-3.5 h-3.5" />
 						</button>
 					</AlertDialogTrigger>
-					<AlertDialogContent>
+					<AlertDialogContent onClick={(e) => e.stopPropagation()}>
 						<AlertDialogHeader>
 							<AlertDialogTitle>Delete Document</AlertDialogTitle>
 							<AlertDialogDescription>
diff --git a/apps/web/components/memory-list-view.tsx b/apps/web/components/memory-list-view.tsx
index 02667147..6fc80afa 100644
--- a/apps/web/components/memory-list-view.tsx
+++ b/apps/web/components/memory-list-view.tsx
@@ -54,6 +54,7 @@ const DocumentCard = memo(
 		onOpenDetails: (document: DocumentWithMemories) => void
 		onDelete: (document: DocumentWithMemories) => void
 	}) => {
+		const [isDialogOpen, setIsDialogOpen] = useState(false)
 		const activeMemories = document.memoryEntries.filter((m) => !m.isForgotten)
 		const forgottenMemories = document.memoryEntries.filter(
 			(m) => m.isForgotten,
@@ -63,8 +64,10 @@ const DocumentCard = memo(
 			<Card
 				className="h-full mx-4 p-4 transition-all cursor-pointer group relative overflow-hidden gap-2 md:w-full shadow-xs"
 				onClick={() => {
-					analytics.documentCardClicked()
-					onOpenDetails(document)
+					if (!isDialogOpen) {
+						analytics.documentCardClicked()
+						onOpenDetails(document)
+					}
 				}}
 				style={{
 					backgroundColor: colors.document.primary,
@@ -143,7 +146,7 @@ const DocumentCard = memo(
 							)}
 						</div>
 
-						<AlertDialog>
+						<AlertDialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
 							<AlertDialogTrigger asChild>
 								<button
 									className="opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-md hover:bg-red-500/20"
@@ -158,7 +161,7 @@ const DocumentCard = memo(
 									<Trash2 className="w-3.5 h-3.5" />
 								</button>
 							</AlertDialogTrigger>
-							<AlertDialogContent>
+							<AlertDialogContent onClick={(e) => e.stopPropagation()}>
 								<AlertDialogHeader>
 									<AlertDialogTitle>Delete Document</AlertDialogTitle>
 									<AlertDialogDescription>