fix(link): enter conflict with command palette

web/components/routes/link/LinkRoute.tsx

@@ -1,28 +1,47 @@
 "use client"
 
+import React, { useEffect, useState, useCallback } 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 { useEffect, useState } from "react"
 import { useAtom } from "jotai"
 import { linkEditIdAtom } from "@/store/link"
 import { LinkBottomBar } from "./bottom-bar"
+import { commandPaletteOpenAtom } from "@/components/custom/command-palette/command-palette"
 
-export function LinkRoute() {
+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 [disableEnterKey, setDisableEnterKey] = useState(false)
 
 	useEffect(() => {
 		setEditId(nuqsEditId)
 	}, [nuqsEditId, setEditId])
 
+	const handleCommandPaletteClose = useCallback(() => {
+		setDisableEnterKey(true)
+		setTimeout(() => setDisableEnterKey(false), 100)
+	}, [])
+
+	useEffect(() => {
+		if (!isCommandPaletteOpen) {
+			handleCommandPaletteClose()
+		}
+	}, [isCommandPaletteOpen, handleCommandPaletteClose])
+
 	return (
 		<div className="flex h-full flex-auto flex-col overflow-hidden">
 			<LinkHeader />
 			<LinkManage />
-			<LinkList key={nuqsEditId} activeItemIndex={activeItemIndex} setActiveItemIndex={setActiveItemIndex} />
+			<LinkList
+				key={nuqsEditId}
+				activeItemIndex={activeItemIndex}
+				setActiveItemIndex={setActiveItemIndex}
+				disableEnterKey={disableEnterKey}
+			/>
 			<LinkBottomBar />
 		</div>
 	)

web/components/routes/link/header.tsx

@@ -24,11 +24,6 @@ export const learningStateAtom = atom<string>("all")
 export const LinkHeader = React.memo(() => {
 	const isTablet = useMedia("(max-width: 1024px)")
 
-	const [activeState, setActiveState] = useQueryState(
-		"state",
-		parseAsStringLiteral(["all", "ToLearn", "learning", "learned"]).withDefault("all")
-	)
-
 	return (
 		<>
 			<ContentHeader className="px-6 py-5 max-lg:px-4">
@@ -57,42 +52,6 @@ export const LinkHeader = React.memo(() => {
 
 LinkHeader.displayName = "LinkHeader"
 
-// const LearningTab = React.memo(() => {
-// 	const [activeTab, setActiveTab] = useAtom(learningStateAtom)
-// 	const [activeState, setActiveState] = useQueryState(
-// 		"state",
-// 		parseAsStringLiteral(Object.values(ALL_STATES_STRING)).withDefault(ALL_STATES_STRING[0])
-// 	)
-
-// 	const handleTabChange = React.useCallback(
-// 		(value: string) => {
-// 			setActiveTab(value)
-// 			setActiveState(value)
-// 		},
-// 		[setActiveTab, setActiveState]
-// 	)
-
-// 	React.useEffect(() => {
-// 		setActiveTab(activeState)
-// 	}, [activeState, setActiveTab])
-
-// 	return (
-// 		<FancySwitch
-// 			value={activeTab}
-// 			onChange={value => {
-// 				handleTabChange(value as string)
-// 			}}
-// 			options={ALL_STATES}
-// 			className="bg-secondary flex rounded-lg"
-// 			highlighterClassName="bg-secondary-foreground/10 rounded-lg"
-// 			radioClassName={cn(
-// 				"relative mx-2 flex h-8 cursor-pointer items-center justify-center rounded-full px-1 text-sm text-secondary-foreground/60 data-[checked]:text-secondary-foreground font-medium transition-colors focus:outline-none"
-// 			)}
-// 			highlighterIncludeMargin={true}
-// 		/>
-// 	)
-// })
-
 const LearningTab = React.memo(() => {
 	const [activeTab, setActiveTab] = useAtom(learningStateAtom)
 	const [activeState, setActiveState] = useQueryState(

web/components/routes/link/list.tsx

@@ -25,9 +25,10 @@ import { commandPaletteOpenAtom } from "@/components/custom/command-palette/comm
 interface LinkListProps {
 	activeItemIndex: number | null
 	setActiveItemIndex: React.Dispatch<React.SetStateAction<number | null>>
+	disableEnterKey: boolean
 }
 
-const LinkList: React.FC<LinkListProps> = ({ activeItemIndex, setActiveItemIndex }) => {
+const LinkList: React.FC<LinkListProps> = ({ activeItemIndex, setActiveItemIndex, disableEnterKey }) => {
 	const [isCommandPalettePpen] = useAtom(commandPaletteOpenAtom)
 	const [editId, setEditId] = useQueryState("editId")
 	const [activeLearningState] = useAtom(learningStateAtom)
@@ -123,11 +124,13 @@ const LinkList: React.FC<LinkListProps> = ({ activeItemIndex, setActiveItemIndex
 
 					return newIndex
 				})
-			} else if (e.key === "Enter" && activeItemIndex !== null) {
+			} else if (e.key === "Enter" && !disableEnterKey) {
 				e.preventDefault()
-				const activeLink = sortedLinks[activeItemIndex]
+				if (activeItemIndex !== null) {
-				if (activeLink) {
+					const activeLink = sortedLinks[activeItemIndex]
-					setEditId(activeLink.id)
+					if (activeLink) {
+						setEditId(activeLink.id)
+					}
 				}
 			}
 		}
@@ -143,7 +146,8 @@ const LinkList: React.FC<LinkListProps> = ({ activeItemIndex, setActiveItemIndex
 		isCommandPalettePpen,
 		activeItemIndex,
 		setEditId,
-		setActiveItemIndex
+		setActiveItemIndex,
+		disableEnterKey
 	])
 
 	const handleDragStart = useCallback(