fix(link): listen on the list and fix timeout

web/components/routes/link/LinkRoute.tsx

@@ -1,43 +1,53 @@
 "use client"
 
-import React, { useEffect, useState, useCallback } from "react"
+import React, { useEffect, useState, useCallback, useRef } from "react"
 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 { 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(() => {
-		setEditId(nuqsEditId)
-	}, [nuqsEditId, setEditId])
+	const timeoutRef = useRef<NodeJS.Timeout | null>(null)
 
 	const handleCommandPaletteClose = useCallback(() => {
+		if (timeoutRef.current) {
+			clearTimeout(timeoutRef.current)
+		}
+
 		setDisableEnterKey(true)
-		setTimeout(() => setDisableEnterKey(false), 100)
+		timeoutRef.current = setTimeout(() => {
+			setDisableEnterKey(false)
+			timeoutRef.current = null
+		}, 100)
 	}, [])
 
 	useEffect(() => {
-		if (!isCommandPaletteOpen) {
+		if (isDeleteConfirmShown || isCommandPaletteOpen) {
+			setDisableEnterKey(true)
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current)
+				timeoutRef.current = null
+			}
+		} else if (!isCommandPaletteOpen) {
 			handleCommandPaletteClose()
 		}
-	}, [isCommandPaletteOpen, handleCommandPaletteClose])
 
-	useEffect(() => {
-		setDisableEnterKey(isDeleteConfirmShown || isCommandPaletteOpen)
-	}, [isDeleteConfirmShown, isCommandPaletteOpen])
+		return () => {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current)
+			}
+		}
+	}, [isDeleteConfirmShown, isCommandPaletteOpen, handleCommandPaletteClose])
 
 	return (
 		<div className="flex h-full flex-auto flex-col overflow-hidden">

web/components/routes/link/list.tsx

@@ -167,6 +167,7 @@ const LinkList: React.FC<LinkListProps> = ({ activeItemIndex, setActiveItemIndex
 					return newIndex
 				})
 			} else if (e.key === "Enter" && !disableEnterKey) {
+				console.log("Enter key pressed", { activeItemIndex, sortedLinks, disableEnterKey })
 				e.preventDefault()
 				if (activeItemIndex !== null) {
 					const activeLink = sortedLinks[activeItemIndex]

web/components/routes/link/partials/link-item.tsx

@@ -48,16 +48,6 @@ export const LinkItem: React.FC<LinkItemProps> = ({
 		[transform, transition, isDragging]
 	)
 
-	const handleKeyDown = useCallback(
-		(e: React.KeyboardEvent) => {
-			if (e.key === "Enter") {
-				e.preventDefault()
-				setEditId(personalLink.id)
-			}
-		},
-		[setEditId, personalLink.id]
-	)
-
 	const handleSuccess = useCallback(() => setEditId(null), [setEditId])
 	const handleOnClose = useCallback(() => setEditId(null), [setEditId])
 	const handleRowDoubleClick = useCallback(() => setEditId(personalLink.id), [setEditId, personalLink.id])
@@ -89,7 +79,6 @@ export const LinkItem: React.FC<LinkItemProps> = ({
 			tabIndex={0}
 			onFocus={() => setActiveItemIndex(index)}
 			onBlur={() => setActiveItemIndex(null)}
-			onKeyDown={handleKeyDown}
 			className={cn(
 				"relative cursor-default outline-none",
 				"grid grid-cols-[auto_1fr_auto] items-center gap-x-2 py-2 max-lg:px-4 sm:px-5 sm:py-2",