fix(link): improve UX, maintain state (#154)

* fix(topic): handleSelectLearningState missing depth

* fix(link): use active index instead of native focus

* chore(palette): use atom for maintain state

* chore(link): prevent keydown if command palette active

* fix: responsive link item

* chore: add active item index state to LinkRoute

* fix: ability to press enter go to edit mode

web/components/routes/link/LinkRoute.tsx

@@ -4,7 +4,7 @@ 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 } from "react"
+import { useEffect, useState } from "react"
 import { useAtom } from "jotai"
 import { linkEditIdAtom } from "@/store/link"
 import { LinkBottomBar } from "./bottom-bar"
@@ -12,6 +12,7 @@ import { LinkBottomBar } from "./bottom-bar"
 export function LinkRoute() {
 	const [, setEditId] = useAtom(linkEditIdAtom)
 	const [nuqsEditId] = useQueryState("editId")
+	const [activeItemIndex, setActiveItemIndex] = useState<number | null>(null)
 
 	useEffect(() => {
 		setEditId(nuqsEditId)
@@ -21,8 +22,7 @@ export function LinkRoute() {
 		<div className="flex h-full flex-auto flex-col overflow-hidden">
 			<LinkHeader />
 			<LinkManage />
-			{/* Refresh list everytime editId is changed */}
-			<LinkList key={nuqsEditId} />
+			<LinkList key={nuqsEditId} activeItemIndex={activeItemIndex} setActiveItemIndex={setActiveItemIndex} />
 			<LinkBottomBar />
 		</div>
 	)