fix(link): Navigate between item and fix Enter keybind (#165)

* feat: add item scroll to active

* fix: reset enterkey and scroll to view

* fix: link item displayName

web/components/routes/link/LinkRoute.tsx

@@ -8,11 +8,12 @@ import { parseAsBoolean, useQueryState } from "nuqs"
 import { atom, useAtom } from "jotai"
 import { LinkBottomBar } from "./bottom-bar"
 import { commandPaletteOpenAtom } from "@/components/custom/command-palette/command-palette"
+import { useKey } from "react-use"
 
 export const isDeleteConfirmShownAtom = atom(false)
 
 export function LinkRoute(): React.ReactElement {
-	const [nuqsEditId] = useQueryState("editId")
+	const [nuqsEditId, setNuqsEditId] = useQueryState("editId")
 	const [activeItemIndex, setActiveItemIndex] = useState<number | null>(null)
 	const [isInCreateMode] = useQueryState("create", parseAsBoolean)
 	const [isCommandPaletteOpen] = useAtom(commandPaletteOpenAtom)
@@ -50,6 +51,11 @@ export function LinkRoute(): React.ReactElement {
 		}
 	}, [isDeleteConfirmShown, isCommandPaletteOpen, isInCreateMode, handleCommandPaletteClose])
 
+	useKey("Escape", () => {
+		setDisableEnterKey(false)
+		setNuqsEditId(null)
+	})
+
 	return (
 		<>
 			<LinkHeader />

web/components/routes/link/header.tsx

@@ -26,7 +26,7 @@ export const LinkHeader = React.memo(() => {
 
 	return (
 		<>
-			<ContentHeader className="px-6 max-lg:px-4 lg:py-5">
+			<ContentHeader className="px-6 max-lg:px-4 lg:py-4">
 				<div className="flex min-w-0 shrink-0 items-center gap-1.5">
 					<SidebarToggleButton />
 					<div className="flex min-h-0 items-center">

web/components/routes/link/list.tsx

@@ -24,6 +24,7 @@ import { commandPaletteOpenAtom } from "@/components/custom/command-palette/comm
 import { useConfirm } from "@omit/react-confirm-dialog"
 import { useLinkActions } from "./hooks/use-link-actions"
 import { isDeleteConfirmShownAtom } from "./LinkRoute"
+import { useActiveItemScroll } from "@/hooks/use-active-item-scroll"
 
 interface LinkListProps {
 	activeItemIndex: number | null
@@ -77,12 +78,6 @@ const LinkList: React.FC<LinkListProps> = ({ activeItemIndex, setActiveItemIndex
 		})
 	)
 
-	useKey("Escape", () => {
-		if (editId) {
-			setEditId(null)
-		}
-	})
-
 	useKey(
 		event => (event.metaKey || event.ctrlKey) && event.key === "Backspace",
 		async () => {
@@ -245,6 +240,8 @@ const LinkList: React.FC<LinkListProps> = ({ activeItemIndex, setActiveItemIndex
 		setDraggingId(null)
 	}
 
+	const setElementRef = useActiveItemScroll<HTMLLIElement>({ activeIndex: activeItemIndex })
+
 	return (
 		<Primitive.div
 			className="mb-11 flex w-full flex-1 flex-col overflow-y-auto outline-none [scrollbar-gutter:stable]"
@@ -271,6 +268,7 @@ const LinkList: React.FC<LinkListProps> = ({ activeItemIndex, setActiveItemIndex
 										isActive={activeItemIndex === index}
 										setActiveItemIndex={setActiveItemIndex}
 										index={index}
+										ref={el => setElementRef(el, index)}
 									/>
 								)
 						)}

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

@@ -15,7 +15,7 @@ import { cn, ensureUrlProtocol } from "@/lib/utils"
 import { LEARNING_STATES, LearningStateValue } from "@/lib/constants"
 import { linkOpenPopoverForIdAtom } from "@/store/link"
 
-interface LinkItemProps {
+interface LinkItemProps extends React.HTMLAttributes<HTMLLIElement> {
 	personalLink: PersonalLink
 	disabled?: boolean
 	isEditing: boolean
@@ -26,16 +26,8 @@ interface LinkItemProps {
 	index: number
 }
 
-export const LinkItem: React.FC<LinkItemProps> = ({
+export const LinkItem = React.forwardRef<HTMLLIElement, LinkItemProps>(
-	isEditing,
+	({ personalLink, disabled, isEditing, setEditId, isDragging, isActive, setActiveItemIndex, index }, ref) => {
-	setEditId,
-	personalLink,
-	disabled = false,
-	isDragging,
-	isActive,
-	setActiveItemIndex,
-	index
-}) => {
 		const [openPopoverForId, setOpenPopoverForId] = useAtom(linkOpenPopoverForIdAtom)
 		const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: personalLink.id, disabled })
 
@@ -67,12 +59,21 @@ export const LinkItem: React.FC<LinkItemProps> = ({
 		)
 
 		if (isEditing) {
-		return <LinkForm onClose={handleOnClose} personalLink={personalLink} onSuccess={handleSuccess} onFail={() => {}} />
+			return (
+				<LinkForm onClose={handleOnClose} personalLink={personalLink} onSuccess={handleSuccess} onFail={() => {}} />
+			)
 		}
 
 		return (
 			<li
-			ref={setNodeRef}
+				ref={node => {
+					setNodeRef(node)
+					if (typeof ref === "function") {
+						ref(node)
+					} else if (ref) {
+						ref.current = node
+					}
+				}}
 				style={style as React.CSSProperties}
 				{...attributes}
 				{...listeners}
@@ -81,7 +82,7 @@ export const LinkItem: React.FC<LinkItemProps> = ({
 				onBlur={() => setActiveItemIndex(null)}
 				className={cn(
 					"relative cursor-default outline-none",
-				"mx-auto grid w-[98%] grid-cols-[auto_1fr_auto] items-center gap-x-2 rounded-lg p-2",
+					"grid grid-cols-[auto_1fr_auto] items-center gap-x-2 py-2 max-lg:px-4 sm:px-5 sm:py-2",
 					{
 						"bg-muted-foreground/5": isActive,
 						"hover:bg-muted/50": !isActive
@@ -156,4 +157,7 @@ export const LinkItem: React.FC<LinkItemProps> = ({
 				</div>
 			</li>
 		)
-}
+	}
+)
+
+LinkItem.displayName = "LinkItem"

web/hooks/use-active-item-scroll.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef, useCallback } from "react"
+
+type ElementRef<T extends HTMLElement> = T | null
+type ElementRefs<T extends HTMLElement> = ElementRef<T>[]
+
+interface ActiveItemScrollOptions {
+	activeIndex: number | null
+}
+
+export function useActiveItemScroll<T extends HTMLElement>(options: ActiveItemScrollOptions) {
+	const { activeIndex } = options
+	const elementRefs = useRef<ElementRefs<T>>([])
+
+	const scrollActiveElementIntoView = useCallback((index: number) => {
+		const activeElement = elementRefs.current[index]
+		activeElement?.scrollIntoView({ block: "nearest" })
+	}, [])
+
+	useEffect(() => {
+		if (activeIndex !== null) {
+			scrollActiveElementIntoView(activeIndex)
+		}
+	}, [activeIndex, scrollActiveElementIntoView])
+
+	const setElementRef = useCallback((element: ElementRef<T>, index: number) => {
+		elementRefs.current[index] = element
+	}, [])
+
+	return setElementRef
+}