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>
 	)

web/components/routes/link/list.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react"
+import React, { useCallback, useEffect, useMemo } from "react"
 import {
 	DndContext,
 	closestCenter,
@@ -22,13 +22,16 @@ import { useQueryState } from "nuqs"
 import { learningStateAtom } from "./header"
 import { commandPaletteOpenAtom } from "@/components/custom/command-palette/command-palette"
 
-interface LinkListProps {}
+interface LinkListProps {
+	activeItemIndex: number | null
+	setActiveItemIndex: React.Dispatch<React.SetStateAction<number | null>>
+}
 
-const LinkList: React.FC<LinkListProps> = () => {
+const LinkList: React.FC<LinkListProps> = ({ activeItemIndex, setActiveItemIndex }) => {
 	const [isCommandPalettePpen] = useAtom(commandPaletteOpenAtom)
 	const [editId, setEditId] = useQueryState("editId")
 	const [activeLearningState] = useAtom(learningStateAtom)
-	const [activeItemIndex, setActiveItemIndex] = useState<number | null>(null)
+	const [draggingId, setDraggingId] = React.useState<UniqueIdentifier | null>(null)
 
 	const { me } = useAccount({
 		root: { personalLinks: [] }
@@ -36,7 +39,6 @@ const LinkList: React.FC<LinkListProps> = () => {
 	const personalLinks = useMemo(() => me?.root?.personalLinks || [], [me?.root?.personalLinks])
 
 	const [sort] = useAtom(linkSortAtom)
-	const [draggingId, setDraggingId] = useState<UniqueIdentifier | null>(null)
 
 	const filteredLinks = useMemo(
 		() =>
@@ -73,6 +75,16 @@ const LinkList: React.FC<LinkListProps> = () => {
 		}
 	})
 
+	// on mounted, if editId is set, set activeItemIndex to the index of the item with the editId
+	useEffect(() => {
+		if (editId) {
+			const index = sortedLinks.findIndex(link => link?.id === editId)
+			if (index !== -1) {
+				setActiveItemIndex(index)
+			}
+		}
+	}, [editId, sortedLinks, setActiveItemIndex])
+
 	const updateSequences = useCallback((links: PersonalLinkLists) => {
 		links.forEach((link, index) => {
 			if (link) {
@@ -111,12 +123,28 @@ const LinkList: React.FC<LinkListProps> = () => {
 
 					return newIndex
 				})
+			} else if (e.key === "Enter" && activeItemIndex !== null) {
+				e.preventDefault()
+				const activeLink = sortedLinks[activeItemIndex]
+				if (activeLink) {
+					setEditId(activeLink.id)
+				}
 			}
 		}
 
 		window.addEventListener("keydown", handleKeyDown)
 		return () => window.removeEventListener("keydown", handleKeyDown)
-	}, [me?.root?.personalLinks, sortedLinks, editId, sort, updateSequences, isCommandPalettePpen])
+	}, [
+		me?.root?.personalLinks,
+		sortedLinks,
+		editId,
+		sort,
+		updateSequences,
+		isCommandPalettePpen,
+		activeItemIndex,
+		setEditId,
+		setActiveItemIndex
+	])
 
 	const handleDragStart = useCallback(
 		(event: DragStartEvent) => {

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

@@ -90,82 +90,76 @@ export const LinkItem: React.FC<LinkItemProps> = ({
 			onFocus={() => setActiveItemIndex(index)}
 			onBlur={() => setActiveItemIndex(null)}
 			onKeyDown={handleKeyDown}
-			className={cn("relative flex h-14 cursor-default items-center outline-none xl:h-11", {
-				"bg-muted-foreground/10": isActive,
-				"hover:bg-muted/50": !isActive
-			})}
+			className={cn(
+				"relative cursor-default outline-none",
+				"grid grid-cols-[auto_1fr_auto] items-center gap-x-2 px-2 py-2 sm:px-4 sm:py-2",
+				{
+					"bg-muted-foreground/10": isActive,
+					"hover:bg-muted/50": !isActive
+				}
+			)}
 			onDoubleClick={handleRowDoubleClick}
 		>
-			<div className="flex grow justify-between gap-x-6 px-6 max-lg:px-4">
-				<div className="flex min-w-0 items-center gap-x-4">
-					<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>
+			<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>
 
-					{personalLink.icon && (
-						<Image
-							src={personalLink.icon}
-							alt={personalLink.title}
-							className="size-5 rounded-full"
-							width={16}
-							height={16}
-						/>
-					)}
-					<div className="w-full min-w-0 flex-auto">
-						<div className="gap-x-2 space-y-0.5 xl:flex xl:flex-row">
-							<p className="text-primary hover:text-primary line-clamp-1 text-sm font-medium xl:truncate">
-								{personalLink.title}
-							</p>
-							{personalLink.url && (
-								<div className="group flex items-center gap-x-1">
-									<LaIcon
-										name="Link"
-										aria-hidden="true"
-										className="text-muted-foreground group-hover:text-primary flex-none"
-									/>
-									<Link
-										href={personalLink.url}
-										passHref
-										prefetch={false}
-										target="_blank"
-										onClick={e => e.stopPropagation()}
-										className="text-muted-foreground hover:text-primary text-xs"
-									>
-										<span className="xl:truncate">{personalLink.url}</span>
-									</Link>
-								</div>
-							)}
+			<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}
+					/>
+				)}
+				<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={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>
 
-				<div className="flex shrink-0 items-center gap-x-4">
-					{personalLink.topic && <Badge variant="secondary">{personalLink.topic.prettyName}</Badge>}
-				</div>
+			<div className="flex shrink-0 items-center justify-end">
+				{personalLink.topic && <Badge variant="secondary">{personalLink.topic.prettyName}</Badge>}
 			</div>
 		</li>
 	)