fix(link): delete link should disabled all key outside confirm

web/components/routes/link/LinkRoute.tsx

@@ -5,16 +5,19 @@ import { LinkHeader } from "@/components/routes/link/header"
 import { LinkList } from "@/components/routes/link/list"
 import { LinkManage } from "@/components/routes/link/manage"
 import { useQueryState } from "nuqs"
-import { useAtom } from "jotai"
+import { atom, useAtom } from "jotai"
 import { linkEditIdAtom } from "@/store/link"
 import { LinkBottomBar } from "./bottom-bar"
 import { commandPaletteOpenAtom } from "@/components/custom/command-palette/command-palette"
 
+export const isDeleteConfirmShownAtom = atom(false)
+
 export function LinkRoute(): React.ReactElement {
 	const [, setEditId] = useAtom(linkEditIdAtom)
 	const [nuqsEditId] = useQueryState("editId")
 	const [activeItemIndex, setActiveItemIndex] = useState<number | null>(null)
 	const [isCommandPaletteOpen] = useAtom(commandPaletteOpenAtom)
+	const [isDeleteConfirmShown] = useAtom(isDeleteConfirmShownAtom)
 	const [disableEnterKey, setDisableEnterKey] = useState(false)
 
 	useEffect(() => {
@@ -32,6 +35,10 @@ export function LinkRoute(): React.ReactElement {
 		}
 	}, [isCommandPaletteOpen, handleCommandPaletteClose])
 
+	useEffect(() => {
+		setDisableEnterKey(isDeleteConfirmShown || isCommandPaletteOpen)
+	}, [isDeleteConfirmShown, isCommandPaletteOpen])
+
 	return (
 		<div className="flex h-full flex-auto flex-col overflow-hidden">
 			<LinkHeader />

web/components/routes/link/bottom-bar.tsx

@@ -13,7 +13,7 @@ import { useAccount, useCoState } from "@/lib/providers/jazz-provider"
 import { PersonalLink } from "@/lib/schema"
 import { ID } from "jazz-tools"
 import { globalLinkFormExceptionRefsAtom } from "./partials/form/link-form"
-import { toast } from "sonner"
+import { useLinkActions } from "./hooks/use-link-actions"
 
 interface ToolbarButtonProps extends React.ComponentPropsWithoutRef<typeof Button> {
 	icon: keyof typeof icons
@@ -66,6 +66,7 @@ export const LinkBottomBar: React.FC = () => {
 	const plusBtnRef = useRef<HTMLButtonElement>(null)
 	const plusMoreBtnRef = useRef<HTMLButtonElement>(null)
 
+	const { deleteLink } = useLinkActions()
 	const confirm = useConfirm()
 
 	useEffect(() => {
@@ -107,24 +108,8 @@ export const LinkBottomBar: React.FC = () => {
 		})
 
 		if (result) {
-			if (!me?.root.personalLinks) return
+			if (!me) return
-
+			deleteLink(me, personalLink)
-			const index = me.root.personalLinks.findIndex(item => item?.id === personalLink.id)
-			if (index === -1) {
-				console.error("Delete operation fail", { index, personalLink })
-				return
-			}
-
-			toast.success("Link deleted.", {
-				position: "bottom-right",
-				description: (
-					<span>
-						<strong>{personalLink.title}</strong> has been deleted.
-					</span>
-				)
-			})
-
-			me.root.personalLinks.splice(index, 1)
 			setEditId(null)
 		}
 	}

web/components/routes/link/hooks/use-link-actions.ts

@@ -0,0 +1,30 @@
+import * as React from "react"
+import { toast } from "sonner"
+import { LaAccount, PersonalLink } from "@/lib/schema"
+
+export const useLinkActions = () => {
+	const deleteLink = React.useCallback((me: LaAccount, link: PersonalLink) => {
+		if (!me.root?.personalLinks) return
+
+		try {
+			const index = me.root.personalLinks.findIndex(item => item?.id === link.id)
+			if (index === -1) {
+				console.error("Delete operation fail", { index, link })
+				return
+			}
+
+			toast.success("Link deleted.", {
+				position: "bottom-right",
+				description: `${link.title} has been deleted.`
+			})
+
+			me.root.personalLinks.splice(index, 1)
+		} catch (error) {
+			toast.error("Failed to delete link")
+		}
+	}, [])
+
+	return {
+		deleteLink
+	}
+}

web/components/routes/link/list.tsx

@@ -22,7 +22,8 @@ import { useQueryState } from "nuqs"
 import { learningStateAtom } from "./header"
 import { commandPaletteOpenAtom } from "@/components/custom/command-palette/command-palette"
 import { useConfirm } from "@omit/react-confirm-dialog"
-import { toast } from "sonner"
+import { useLinkActions } from "./hooks/use-link-actions"
+import { isDeleteConfirmShownAtom } from "./LinkRoute"
 
 interface LinkListProps {
 	activeItemIndex: number | null
@@ -32,9 +33,12 @@ interface LinkListProps {
 
 const LinkList: React.FC<LinkListProps> = ({ activeItemIndex, setActiveItemIndex, disableEnterKey }) => {
 	const [isCommandPalettePpen] = useAtom(commandPaletteOpenAtom)
+	const [, setIsDeleteConfirmShown] = useAtom(isDeleteConfirmShownAtom)
 	const [editId, setEditId] = useQueryState("editId")
 	const [activeLearningState] = useAtom(learningStateAtom)
 	const [draggingId, setDraggingId] = React.useState<UniqueIdentifier | null>(null)
+
+	const { deleteLink } = useLinkActions()
 	const confirm = useConfirm()
 
 	const { me } = useAccount({
@@ -83,10 +87,9 @@ const LinkList: React.FC<LinkListProps> = ({ activeItemIndex, setActiveItemIndex
 		event => (event.metaKey || event.ctrlKey) && event.key === "Backspace",
 		async () => {
 			if (activeItemIndex !== null) {
+				setIsDeleteConfirmShown(true)
 				const activeLink = sortedLinks[activeItemIndex]
 				if (activeLink) {
-					console.log("Delete link", activeLink.toJSON())
-
 					const result = await confirm({
 						title: `Delete "${activeLink.title}"?`,
 						description: "This action cannot be undone.",
@@ -102,25 +105,12 @@ const LinkList: React.FC<LinkListProps> = ({ activeItemIndex, setActiveItemIndex
 					})
 
 					if (result) {
-						if (!me?.root.personalLinks) return
+						if (!me) return
+						deleteLink(me, activeLink)
 
-						const index = me.root.personalLinks.findIndex(item => item?.id === activeLink.id)
+						setIsDeleteConfirmShown(false)
-						if (index === -1) {
+					} else {
-							console.error("Delete operation fail", { index, activeLink })
+						setIsDeleteConfirmShown(false)
-							return
-						}
-
-						toast.success("Link deleted.", {
-							position: "bottom-right",
-							description: (
-								<span>
-									<strong>{activeLink.title}</strong> has been deleted.
-								</span>
-							)
-						})
-
-						me.root.personalLinks.splice(index, 1)
-						setEditId(null)
 					}
 				}
 			}
@@ -177,6 +167,7 @@ const LinkList: React.FC<LinkListProps> = ({ activeItemIndex, setActiveItemIndex
 					return newIndex
 				})
 			} else if (e.key === "Enter" && !disableEnterKey) {
+				console.log("Enter key pressed")
 				e.preventDefault()
 				if (activeItemIndex !== null) {
 					const activeLink = sortedLinks[activeItemIndex]