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,134 +26,138 @@ interface LinkItemProps {
 	index: number
 }
 
-export const LinkItem: React.FC<LinkItemProps> = ({
-	isEditing,
-	setEditId,
-	personalLink,
-	disabled = false,
-	isDragging,
-	isActive,
-	setActiveItemIndex,
-	index
-}) => {
-	const [openPopoverForId, setOpenPopoverForId] = useAtom(linkOpenPopoverForIdAtom)
-	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: personalLink.id, disabled })
+export const LinkItem = React.forwardRef<HTMLLIElement, LinkItemProps>(
+	({ personalLink, disabled, isEditing, setEditId, isDragging, isActive, setActiveItemIndex, index }, ref) => {
+		const [openPopoverForId, setOpenPopoverForId] = useAtom(linkOpenPopoverForIdAtom)
+		const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: personalLink.id, disabled })
 
-	const style = useMemo(
-		() => ({
-			transform: CSS.Transform.toString(transform),
-			transition,
-			pointerEvents: isDragging ? "none" : "auto"
-		}),
-		[transform, transition, isDragging]
-	)
+		const style = useMemo(
+			() => ({
+				transform: CSS.Transform.toString(transform),
+				transition,
+				pointerEvents: isDragging ? "none" : "auto"
+			}),
+			[transform, transition, isDragging]
+		)
 
-	const handleSuccess = useCallback(() => setEditId(null), [setEditId])
-	const handleOnClose = useCallback(() => setEditId(null), [setEditId])
-	const handleRowDoubleClick = useCallback(() => 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])
 
-	const selectedLearningState = useMemo(
-		() => LEARNING_STATES.find(ls => ls.value === personalLink.learningState),
-		[personalLink.learningState]
-	)
+		const selectedLearningState = useMemo(
+			() => LEARNING_STATES.find(ls => ls.value === personalLink.learningState),
+			[personalLink.learningState]
+		)
 
-	const handleLearningStateSelect = useCallback(
-		(value: string) => {
-			const learningState = value as LearningStateValue
-			personalLink.learningState = personalLink.learningState === learningState ? undefined : learningState
-			setOpenPopoverForId(null)
-		},
-		[personalLink, setOpenPopoverForId]
-	)
+		const handleLearningStateSelect = useCallback(
+			(value: string) => {
+				const learningState = value as LearningStateValue
+				personalLink.learningState = personalLink.learningState === learningState ? undefined : learningState
+				setOpenPopoverForId(null)
+			},
+			[personalLink, setOpenPopoverForId]
+		)
 
-	if (isEditing) {
-		return <LinkForm onClose={handleOnClose} personalLink={personalLink} onSuccess={handleSuccess} onFail={() => {}} />
-	}
+		if (isEditing) {
+			return (
+				<LinkForm onClose={handleOnClose} personalLink={personalLink} onSuccess={handleSuccess} onFail={() => {}} />
+			)
+		}
 
-	return (
-		<li
-			ref={setNodeRef}
-			style={style as React.CSSProperties}
-			{...attributes}
-			{...listeners}
-			tabIndex={0}
-			onFocus={() => setActiveItemIndex(index)}
-			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",
-				{
-					"bg-muted-foreground/5": isActive,
-					"hover:bg-muted/50": !isActive
-				}
-			)}
-			onDoubleClick={handleRowDoubleClick}
-		>
-			<Popover
-				open={openPopoverForId === personalLink.id}
-				onOpenChange={(open: boolean) => setOpenPopoverForId(open ? personalLink.id : null)}
-			>
-				<PopoverTrigger asChild>
-					<Button size="sm" type="button" role="combobox" variant="secondary" className="size-7 shrink-0 p-0">
-						{selectedLearningState?.icon ? (
-							<LaIcon name={selectedLearningState.icon} className={cn(selectedLearningState.className)} />
-						) : (
-							<LaIcon name="Circle" />
-						)}
-					</Button>
-				</PopoverTrigger>
-				<PopoverContent
-					className="w-52 rounded-lg p-0"
-					side="bottom"
-					align="start"
-					onCloseAutoFocus={e => e.preventDefault()}
-				>
-					<LearningStateSelectorContent
-						showSearch={false}
-						searchPlaceholder="Search state..."
-						value={personalLink.learningState}
-						onSelect={handleLearningStateSelect}
-					/>
-				</PopoverContent>
-			</Popover>
-
-			<div className="flex min-w-0 flex-col items-start gap-y-1 overflow-hidden md:flex-row md:items-center md:gap-x-2">
-				{personalLink.icon && (
-					<Image
-						src={personalLink.icon}
-						alt={personalLink.title}
-						className="size-5 shrink-0 rounded-full"
-						width={16}
-						height={16}
-					/>
+		return (
+			<li
+				ref={node => {
+					setNodeRef(node)
+					if (typeof ref === "function") {
+						ref(node)
+					} else if (ref) {
+						ref.current = node
+					}
+				}}
+				style={style as React.CSSProperties}
+				{...attributes}
+				{...listeners}
+				tabIndex={0}
+				onFocus={() => setActiveItemIndex(index)}
+				onBlur={() => setActiveItemIndex(null)}
+				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",
+					{
+						"bg-muted-foreground/5": isActive,
+						"hover:bg-muted/50": !isActive
+					}
 				)}
+				onDoubleClick={handleRowDoubleClick}
+			>
+				<Popover
+					open={openPopoverForId === personalLink.id}
+					onOpenChange={(open: boolean) => setOpenPopoverForId(open ? personalLink.id : null)}
+				>
+					<PopoverTrigger asChild>
+						<Button size="sm" type="button" role="combobox" variant="secondary" className="size-7 shrink-0 p-0">
+							{selectedLearningState?.icon ? (
+								<LaIcon name={selectedLearningState.icon} className={cn(selectedLearningState.className)} />
+							) : (
+								<LaIcon name="Circle" />
+							)}
+						</Button>
+					</PopoverTrigger>
+					<PopoverContent
+						className="w-52 rounded-lg p-0"
+						side="bottom"
+						align="start"
+						onCloseAutoFocus={e => e.preventDefault()}
+					>
+						<LearningStateSelectorContent
+							showSearch={false}
+							searchPlaceholder="Search state..."
+							value={personalLink.learningState}
+							onSelect={handleLearningStateSelect}
+						/>
+					</PopoverContent>
+				</Popover>
+
 				<div className="flex min-w-0 flex-col items-start gap-y-1 overflow-hidden md:flex-row md:items-center md:gap-x-2">
-					<p className="text-primary hover:text-primary truncate text-sm font-medium">{personalLink.title}</p>
-					{personalLink.url && (
-						<div className="text-muted-foreground flex min-w-0 shrink items-center gap-x-1">
-							<LaIcon name="Link" aria-hidden="true" className="size-3 flex-none" />
-							<Link
-								href={ensureUrlProtocol(personalLink.url)}
-								passHref
-								prefetch={false}
-								target="_blank"
-								onClick={e => e.stopPropagation()}
-								className="hover:text-primary truncate text-xs"
-							>
-								{personalLink.url}
-							</Link>
-						</div>
+					{personalLink.icon && (
+						<Image
+							src={personalLink.icon}
+							alt={personalLink.title}
+							className="size-5 shrink-0 rounded-full"
+							width={16}
+							height={16}
+						/>
+					)}
+					<div className="flex min-w-0 flex-col items-start gap-y-1 overflow-hidden md:flex-row md:items-center md:gap-x-2">
+						<p className="text-primary hover:text-primary truncate text-sm font-medium">{personalLink.title}</p>
+						{personalLink.url && (
+							<div className="text-muted-foreground flex min-w-0 shrink items-center gap-x-1">
+								<LaIcon name="Link" aria-hidden="true" className="size-3 flex-none" />
+								<Link
+									href={ensureUrlProtocol(personalLink.url)}
+									passHref
+									prefetch={false}
+									target="_blank"
+									onClick={e => e.stopPropagation()}
+									className="hover:text-primary truncate text-xs"
+								>
+									{personalLink.url}
+								</Link>
+							</div>
+						)}
+					</div>
+				</div>
+
+				<div className="flex shrink-0 items-center justify-end">
+					{personalLink.topic && (
+						<Badge variant="secondary" className="border-muted-foreground/25">
+							{personalLink.topic.prettyName}
+						</Badge>
 					)}
 				</div>
-			</div>
+			</li>
+		)
+	}
+)
 
-			<div className="flex shrink-0 items-center justify-end">
-				{personalLink.topic && (
-					<Badge variant="secondary" className="border-muted-foreground/25">
-						{personalLink.topic.prettyName}
-					</Badge>
-				)}
-			</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
+}