fix: detail topic (#117)

* feat: keyboard nav

* fix: link update

* feat: reusable learning state

* chore: use new learning state

* feat: add to my profile

* .

* .

* feat: on enter open the link

* fix: lint

* fix: use eslint v8 instead of v9

* fix: add to my profile

* chore: update personal link schema

* chore: update personal page schema

* fix: update detail wrapper

* fix: update page section

* removing option for learning status

* removing option for learning status for topic

* feat: add createdAt and updatedAt for personal Page

* chore: update page section component

* chore: remove chevron from sub menu

* fix: sidebar

* chore: add focus and disable toast

* feat: la editor add execption for no command class

* fix: la editor style and fix page detail

* fix: title

* fix: topic learning state

* chore: add showSearch for learning state

* fix: bunch stuff

* chore: link list and item handle learning state

* chore: set expand to false

* feat: personal link for topic detail

* chore: hook use topic data

* chore: go to list

* fix: link and topic

* feat(utils): new keyboard utils

* feat(store): add linkOpenPopoverForIdAtom for link

* chore: using memo for use topic data

* fix: remove duplicate component

* chore: performance for topic detail lint item

* refactor: remove LinkOptions component

* chore: improve performance for list

* feat: added LinkRoute copmonent

* chore: link manage

* feat: bottom bar

* fix: link

* fix: page wrapper

* fix: import thing

* chore: added a displayname

* refactor: page detail

* refactor: page detail

* fix: add topic to personal link form link

* fix: only show page count if more than zero

* fix: sidebar topic section

---------

Co-authored-by: Nikita <github@nikiv.dev>
Co-authored-by: marshennikovaolga <marshennikova@gmail.com>

web/components/routes/AuthHomeRoute.tsx

@@ -1,19 +0,0 @@
-"use client"
-
-import { LinkHeader } from "@/components/routes/link/header"
-import { LinkList } from "@/components/routes/link/list"
-import { LinkManage } from "@/components/routes/link/form/manage"
-import { useAtom } from "jotai"
-import { linkEditIdAtom } from "@/store/link"
-
-export default function AuthHomeRoute() {
-	const [editId] = useAtom(linkEditIdAtom)
-
-	return (
-		<div className="relative z-[1] flex h-full flex-auto flex-col overflow-hidden">
-			<LinkHeader />
-			<LinkManage />
-			<LinkList key={editId} />
-		</div>
-	)
-}

web/components/routes/force-graph.tsx

@@ -12,7 +12,7 @@ export default function ForceGraph() {
 
 	const graph = useMemo(() => {
 		return globalGroup?.root.topicGraph?.map(
-			topic =>
+			(topic: { name: string; prettyName: string; connectedTopics: Array<{ name?: string }> }) =>
 				({
 					name: topic.name,
 					prettyName: topic.prettyName,

web/components/routes/link/AuthHomeRoute.tsx

@@ -1,19 +0,0 @@
-"use client"
-
-import { LinkHeader } from "@/components/routes/link/header"
-import { LinkList } from "@/components/routes/link/list"
-import { LinkManage } from "@/components/routes/link/form/manage"
-import { useAtom } from "jotai"
-import { linkEditIdAtom } from "@/store/link"
-
-export function AuthHomeRoute() {
-	const [editId] = useAtom(linkEditIdAtom)
-
-	return (
-		<div className="flex h-full flex-auto flex-col overflow-hidden">
-			<LinkHeader />
-			<LinkManage />
-			<LinkList key={editId} />
-		</div>
-	)
-}

web/components/routes/link/LinkRoute.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+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 { useAtom } from "jotai"
+import { linkEditIdAtom } from "@/store/link"
+import { LinkBottomBar } from "./bottom-bar"
+
+export function LinkRoute() {
+	const [, setEditId] = useAtom(linkEditIdAtom)
+	const [nuqsEditId] = useQueryState("editId")
+
+	useEffect(() => {
+		setEditId(nuqsEditId)
+	}, [nuqsEditId, setEditId])
+
+	return (
+		<div className="flex h-full flex-auto flex-col overflow-hidden">
+			<LinkHeader />
+			<LinkManage />
+			<LinkList />
+			<LinkBottomBar />
+		</div>
+	)
+}

web/components/routes/link/bottom-bar.tsx

@@ -0,0 +1,198 @@
+import React, { useEffect, useRef } from "react"
+import { motion, AnimatePresence } from "framer-motion"
+import { icons } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { getSpecialShortcut, formatShortcut, isMacOS } from "@/lib/utils"
+import { LaIcon } from "@/components/custom/la-icon"
+import { useAtom } from "jotai"
+import { linkShowCreateAtom } from "@/store/link"
+import { useQueryState } from "nuqs"
+import { useConfirm } from "@omit/react-confirm-dialog"
+import { useAccount, useCoState } from "@/lib/providers/jazz-provider"
+import { PersonalLink } from "@/lib/schema"
+import { ID } from "jazz-tools"
+import { globalLinkFormExceptionRefsAtom } from "./partials/form/link-form"
+import { toast } from "sonner"
+
+interface ToolbarButtonProps {
+	icon: keyof typeof icons
+	onClick?: (e: React.MouseEvent) => void
+	tooltip?: string
+}
+
+const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(({ icon, onClick, tooltip }, ref) => {
+	const button = (
+		<Button variant="ghost" className="h-8 min-w-14" onClick={onClick} ref={ref}>
+			<LaIcon name={icon} />
+		</Button>
+	)
+
+	if (tooltip) {
+		return (
+			<TooltipProvider>
+				<Tooltip delayDuration={0}>
+					<TooltipTrigger asChild>{button}</TooltipTrigger>
+					<TooltipContent>
+						<p>{tooltip}</p>
+					</TooltipContent>
+				</Tooltip>
+			</TooltipProvider>
+		)
+	}
+
+	return button
+})
+
+ToolbarButton.displayName = "ToolbarButton"
+
+export const LinkBottomBar: React.FC = () => {
+	const [editId, setEditId] = useQueryState("editId")
+	const [, setGlobalLinkFormExceptionRefsAtom] = useAtom(globalLinkFormExceptionRefsAtom)
+	const [showCreate, setShowCreate] = useAtom(linkShowCreateAtom)
+
+	const { me } = useAccount({ root: { personalLinks: [] } })
+	const personalLink = useCoState(PersonalLink, editId as ID<PersonalLink>)
+
+	const cancelBtnRef = useRef<HTMLButtonElement>(null)
+	const confirmBtnRef = useRef<HTMLButtonElement>(null)
+
+	const deleteBtnRef = useRef<HTMLButtonElement>(null)
+	const editMoreBtnRef = useRef<HTMLButtonElement>(null)
+	const plusBtnRef = useRef<HTMLButtonElement>(null)
+	const plusMoreBtnRef = useRef<HTMLButtonElement>(null)
+
+	const confirm = useConfirm()
+
+	useEffect(() => {
+		setGlobalLinkFormExceptionRefsAtom([
+			deleteBtnRef,
+			editMoreBtnRef,
+			cancelBtnRef,
+			confirmBtnRef,
+			plusBtnRef,
+			plusMoreBtnRef
+		])
+	}, [setGlobalLinkFormExceptionRefsAtom])
+
+	const handleDelete = async (e: React.MouseEvent) => {
+		if (!personalLink) return
+
+		const result = await confirm({
+			title: `Delete "${personalLink.title}"?`,
+			description: "This action cannot be undone.",
+			alertDialogTitle: {
+				className: "text-base"
+			},
+			customActions(onConfirm, onCancel) {
+				return (
+					<div className="flex items-center gap-2">
+						<Button variant="outline" onClick={onCancel} ref={cancelBtnRef}>
+							Cancel
+						</Button>
+						<Button variant="destructive" onClick={onConfirm} ref={confirmBtnRef}>
+							Delete
+						</Button>
+					</div>
+				)
+			}
+		})
+
+		if (result) {
+			if (!me?.root.personalLinks) return
+
+			const index = me.root.personalLinks.findIndex(item => item?.id === personalLink.id)
+			if (index === -1) {
+				console.error("Delete operation fail", { index, personalLink })
+				return
+			}
+
+			toast.success("Link deleted.", {
+				position: "bottom-right",
+				description: (
+					<span>
+						<strong>{personalLink.title}</strong> has been deleted.
+					</span>
+				)
+			})
+
+			me.root.personalLinks.splice(index, 1)
+			setEditId(null)
+		}
+	}
+
+	useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (isMacOS()) {
+				if (event.ctrlKey && event.metaKey && event.key.toLowerCase() === "n") {
+					event.preventDefault()
+					setShowCreate(true)
+				}
+			} else {
+				// For Windows, we'll use Ctrl + Win + N
+				// Note: The Windows key is not directly detectable in most browsers
+				if (event.ctrlKey && event.key.toLowerCase() === "n" && (event.metaKey || event.altKey)) {
+					event.preventDefault()
+					setShowCreate(true)
+				}
+			}
+		}
+
+		window.addEventListener("keydown", handleKeyDown)
+		return () => window.removeEventListener("keydown", handleKeyDown)
+	}, [setShowCreate])
+
+	const shortcutKeys = getSpecialShortcut("expandToolbar")
+	const shortcutText = formatShortcut(shortcutKeys)
+
+	return (
+		<motion.div
+			className="bg-background absolute bottom-0 left-0 right-0 border-t"
+			animate={{ y: 0 }}
+			initial={{ y: "100%" }}
+		>
+			<AnimatePresence mode="wait">
+				{editId && (
+					<motion.div
+						key="expanded"
+						className="flex items-center justify-center gap-1 px-2 py-1"
+						initial={{ opacity: 0, y: 20 }}
+						animate={{ opacity: 1, y: 0 }}
+						exit={{ opacity: 0, y: 20 }}
+						transition={{ duration: 0.1 }}
+					>
+						<ToolbarButton icon={"ArrowLeft"} onClick={() => setEditId(null)} />
+						<ToolbarButton icon={"Trash"} onClick={handleDelete} ref={deleteBtnRef} />
+						<ToolbarButton icon={"Ellipsis"} ref={editMoreBtnRef} />
+					</motion.div>
+				)}
+
+				{!editId && (
+					<motion.div
+						key="collapsed"
+						className="flex items-center justify-center gap-1 px-2 py-1"
+						initial={{ opacity: 0, y: -20 }}
+						animate={{ opacity: 1, y: 0 }}
+						exit={{ opacity: 0, y: -20 }}
+						transition={{ duration: 0.1 }}
+					>
+						{showCreate && <ToolbarButton icon={"ArrowLeft"} onClick={() => setShowCreate(true)} />}
+						{!showCreate && (
+							<ToolbarButton
+								icon={"Plus"}
+								onClick={() => setShowCreate(true)}
+								tooltip={`New Link (${shortcutText})`}
+								ref={plusBtnRef}
+							/>
+						)}
+						<ToolbarButton icon={"Ellipsis"} ref={plusMoreBtnRef} />
+					</motion.div>
+				)}
+			</AnimatePresence>
+		</motion.div>
+	)
+}
+
+LinkBottomBar.displayName = "LinkBottomBar"
+
+export default LinkBottomBar

web/components/routes/link/form/index.ts

@@ -1 +0,0 @@
-export * from "./manage"

web/components/routes/link/form/manage.tsx

@@ -1,100 +0,0 @@
-"use client"
-
-import { Button } from "@/components/ui/button"
-import { linkEditIdAtom, linkShowCreateAtom } from "@/store/link"
-import { useAtom } from "jotai"
-import React, { useEffect, useRef, useState } from "react"
-import { useKey } from "react-use"
-import { globalLinkFormExceptionRefsAtom, LinkForm } from "./link-form"
-import { LaIcon } from "@/components/custom/la-icon"
-import LinkOptions from "@/components/LinkOptions"
-// import { FloatingButton } from "./partial/floating-button"
-
-const LinkManage: React.FC = () => {
-	const [showCreate, setShowCreate] = useAtom(linkShowCreateAtom)
-	const [editId, setEditId] = useAtom(linkEditIdAtom)
-	const [, setGlobalExceptionRefs] = useAtom(globalLinkFormExceptionRefsAtom)
-
-	const [showOptions, setShowOptions] = useState(false)
-
-	const optionsRef = useRef<HTMLDivElement>(null)
-	const buttonRef = useRef<HTMLButtonElement>(null)
-
-	const toggleForm = (event: React.MouseEvent) => {
-		event.stopPropagation()
-		if (showCreate) return
-		setShowCreate(prev => !prev)
-	}
-
-	const clickOptionsButton = (e: React.MouseEvent) => {
-		e.preventDefault()
-		setShowOptions(prev => !prev)
-	}
-
-	const handleFormClose = () => {
-		setShowCreate(false)
-	}
-
-	const handleFormFail = () => {}
-
-	// wipes the data from the form when the form is closed
-	React.useEffect(() => {
-		if (!showCreate) {
-			setEditId(null)
-		}
-	}, [showCreate, setEditId])
-
-	useKey("Escape", handleFormClose)
-
-	useEffect(() => {
-		const handleClickOutside = (event: MouseEvent) => {
-			if (optionsRef.current && !optionsRef.current.contains(event.target as Node)) {
-				setShowOptions(false)
-			}
-		}
-
-		if (showOptions) {
-			document.addEventListener("mousedown", handleClickOutside)
-		}
-
-		return () => {
-			document.removeEventListener("mousedown", handleClickOutside)
-		}
-	}, [showOptions])
-
-	/*
-	 * This code means that when link form is opened, these refs will be added as an exception to the click outside handler
-	 */
-	React.useEffect(() => {
-		setGlobalExceptionRefs([optionsRef, buttonRef])
-	}, [setGlobalExceptionRefs])
-
-	return (
-		<>
-			{showCreate && <LinkForm onClose={handleFormClose} onSuccess={handleFormClose} onFail={handleFormFail} />}
-			<div className="absolute bottom-0 m-0 flex w-full list-none bg-inherit p-2.5 text-center align-middle font-semibold leading-[13px] no-underline">
-				<div className="mx-auto flex flex-row items-center justify-center gap-2">
-					<Button
-						variant="ghost"
-						onClick={toggleForm}
-						className={editId || showCreate ? "text-red-500 hover:bg-red-500/50 hover:text-white" : ""}
-					>
-						<LaIcon name={showCreate ? "X" : editId ? "Trash" : "Plus"} />
-					</Button>
-					<div className="relative" ref={optionsRef}>
-						{showOptions && <LinkOptions />}
-						<Button ref={buttonRef} variant="ghost" onClick={clickOptionsButton}>
-							<LaIcon name="Ellipsis" />
-						</Button>
-					</div>
-				</div>
-			</div>
-		</>
-	)
-}
-
-LinkManage.displayName = "LinkManage"
-
-export { LinkManage }
-
-/* <FloatingButton ref={buttonRef} onClick={toggleForm} isOpen={showCreate} /> */

web/components/routes/link/form/partial/floating-button.tsx

@@ -1,28 +0,0 @@
-import React, { forwardRef } from "react"
-import { cn } from "@/lib/utils"
-import { LaIcon } from "@/components/custom/la-icon"
-import { Button, ButtonProps } from "@/components/ui/button"
-
-interface FloatingButtonProps extends ButtonProps {
-	isOpen: boolean
-}
-
-export const FloatingButton = forwardRef<HTMLButtonElement, FloatingButtonProps>(
-	({ isOpen, className, ...props }, ref) => (
-		<Button
-			ref={ref}
-			className={cn(
-				"absolute bottom-4 right-4 h-12 w-12 rounded-full bg-[#274079] p-0 text-white transition-transform hover:bg-[#274079]/90",
-				{ "rotate-45 transform": isOpen },
-				className
-			)}
-			{...props}
-		>
-			<LaIcon name="Plus" className="h-6 w-6" />
-		</Button>
-	)
-)
-
-FloatingButton.displayName = "FloatingButton"
-
-export default FloatingButton

web/components/routes/link/form/partial/learning-state-selector.tsx

@@ -1,90 +0,0 @@
-import { Button } from "@/components/ui/button"
-import { Command, CommandInput, CommandList, CommandItem, CommandGroup } from "@/components/ui/command"
-import { FormField, FormItem, FormLabel, FormControl } from "@/components/ui/form"
-import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import { useFormContext } from "react-hook-form"
-import { cn } from "@/lib/utils"
-import { LaIcon } from "@/components/custom/la-icon"
-import { useAtom } from "jotai"
-import { linkLearningStateSelectorAtom } from "@/store/link"
-import { useMemo } from "react"
-import { LinkFormValues } from "../schema"
-import { LEARNING_STATES } from "@/lib/constants"
-
-export const LearningStateSelector: React.FC = () => {
-	const [islearningStateSelectorOpen, setIslearningStateSelectorOpen] = useAtom(linkLearningStateSelectorAtom)
-	const form = useFormContext<LinkFormValues>()
-
-	const selectedLearningState = useMemo(
-		() => LEARNING_STATES.find(ls => ls.value === form.getValues("learningState")),
-		[form]
-	)
-
-	return (
-		<FormField
-			control={form.control}
-			name="learningState"
-			render={({ field }) => (
-				<FormItem className="space-y-0">
-					<FormLabel className="sr-only">Topic</FormLabel>
-					<Popover open={islearningStateSelectorOpen} onOpenChange={setIslearningStateSelectorOpen}>
-						<PopoverTrigger asChild>
-							<FormControl>
-								<Button size="sm" type="button" role="combobox" variant="secondary" className="gap-x-2 text-sm">
-									{selectedLearningState?.icon && (
-										<LaIcon
-											name={selectedLearningState.icon}
-											className={cn("h-4 w-4", selectedLearningState.className)}
-										/>
-									)}
-									<span className={cn("truncate", selectedLearningState?.className || "")}>
-										{selectedLearningState?.label || "Select state"}
-									</span>
-									<LaIcon name="ChevronDown" />
-								</Button>
-							</FormControl>
-						</PopoverTrigger>
-						<PopoverContent
-							className="w-52 rounded-lg p-0"
-							side="bottom"
-							align="end"
-							onCloseAutoFocus={e => e.preventDefault()}
-						>
-							<Command>
-								<CommandInput placeholder="Search state..." className="h-9" />
-								<CommandList>
-									<ScrollArea>
-										<CommandGroup>
-											{LEARNING_STATES.map(ls => (
-												<CommandItem
-													key={ls.value}
-													value={ls.value}
-													onSelect={value => {
-														field.onChange(value)
-														setIslearningStateSelectorOpen(false)
-													}}
-												>
-													<LaIcon name={ls.icon} className={cn("mr-2", ls.className)} />
-													<span className={ls.className}>{ls.label}</span>
-													<LaIcon
-														name="Check"
-														size={16}
-														className={cn(
-															"absolute right-3",
-															ls.value === field.value ? "text-primary" : "text-transparent"
-														)}
-													/>
-												</CommandItem>
-											))}
-										</CommandGroup>
-									</ScrollArea>
-								</CommandList>
-							</Command>
-						</PopoverContent>
-					</Popover>
-				</FormItem>
-			)}
-		/>
-	)
-}

web/components/routes/link/header.tsx

@@ -88,6 +88,8 @@ const LearningTab = React.memo(() => {
 	)
 })
 
+LearningTab.displayName = "LearningTab"
+
 const FilterAndSort = React.memo(() => {
 	const [sort, setSort] = useAtom(linkSortAtom)
 	const [sortOpen, setSortOpen] = React.useState(false)

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

@@ -1,255 +0,0 @@
-"use client"
-
-import { Button } from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
-import { PersonalLink } from "@/lib/schema/personal-link"
-import { cn } from "@/lib/utils"
-import { useSortable } from "@dnd-kit/sortable"
-import { CSS } from "@dnd-kit/utilities"
-import { ConfirmOptions } from "@omit/react-confirm-dialog"
-import { LinkIcon, Trash2Icon } from "lucide-react"
-import Image from "next/image"
-import Link from "next/link"
-import * as React from "react"
-import { LinkForm } from "./form/link-form"
-import { Command, CommandInput, CommandList, CommandItem, CommandGroup } from "@/components/ui/command"
-import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import { LaIcon } from "@/components/custom/la-icon"
-import { LEARNING_STATES } from "@/lib/constants"
-import { Badge } from "@/components/ui/badge"
-
-interface ListItemProps {
-	confirm: (options: ConfirmOptions) => Promise<boolean>
-	personalLink: PersonalLink
-	disabled?: boolean
-	isEditing: boolean
-	setEditId: (id: string | null) => void
-	isDragging: boolean
-	isFocused: boolean
-	setFocusedId: (id: string | null) => void
-	registerRef: (id: string, ref: HTMLLIElement | null) => void
-	onDelete?: (personalLink: PersonalLink) => void
-	showDeleteIconForLinkId: string | null
-	setShowDeleteIconForLinkId: (id: string | null) => void
-}
-
-export const ListItem: React.FC<ListItemProps> = ({
-	confirm,
-	isEditing,
-	setEditId,
-	personalLink,
-	disabled = false,
-	isDragging,
-	isFocused,
-	setFocusedId,
-	registerRef,
-	onDelete,
-	showDeleteIconForLinkId,
-	setShowDeleteIconForLinkId
-}) => {
-	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: personalLink.id, disabled })
-
-	const style = {
-		transform: CSS.Transform.toString(transform),
-		transition,
-		pointerEvents: isDragging ? "none" : "auto"
-	}
-
-	const refCallback = React.useCallback(
-		(node: HTMLLIElement | null) => {
-			setNodeRef(node)
-			registerRef(personalLink.id, node)
-		},
-		[setNodeRef, registerRef, personalLink.id]
-	)
-
-	const handleKeyDown = (e: React.KeyboardEvent) => {
-		if (e.key === "Enter") {
-			e.preventDefault()
-			setEditId(personalLink.id)
-		}
-	}
-
-	const handleSuccess = () => {
-		setEditId(null)
-	}
-
-	const handleOnClose = () => {
-		setEditId(null)
-	}
-
-	const handleOnFail = () => {}
-
-	// const handleRowClick = () => {
-	// 	setShowDeleteIconForLinkId(personalLink.id)
-	// }
-
-	const handleRowDoubleClick = () => {
-		setEditId(personalLink.id)
-	}
-
-	const handleDelete = async (e: React.MouseEvent, personalLink: PersonalLink) => {
-		e.stopPropagation()
-
-		const result = await confirm({
-			title: `Delete "${personalLink.title}"?`,
-			description: "This action cannot be undone.",
-			alertDialogTitle: {
-				className: "text-base"
-			},
-			customActions: (onConfirm, onCancel) => (
-				<>
-					<Button variant="outline" onClick={onCancel}>
-						Cancel
-					</Button>
-					<Button variant="destructive" onClick={onConfirm}>
-						Delete
-					</Button>
-				</>
-			)
-		})
-
-		if (result) {
-			onDelete?.(personalLink)
-		}
-	}
-
-	const selectedLearningState = LEARNING_STATES.find(ls => ls.value === personalLink.learningState)
-
-	if (isEditing) {
-		return (
-			<LinkForm onClose={handleOnClose} personalLink={personalLink} onSuccess={handleSuccess} onFail={handleOnFail} />
-		)
-	}
-
-	return (
-		<li
-			ref={refCallback}
-			style={style as React.CSSProperties}
-			{...attributes}
-			{...listeners}
-			tabIndex={0}
-			onFocus={() => setFocusedId(personalLink.id)}
-			onBlur={() => {
-				setFocusedId(null)
-			}}
-			onKeyDown={handleKeyDown}
-			className={cn("hover:bg-muted/50 relative flex h-14 cursor-default items-center outline-none xl:h-11", {
-				"bg-muted/50": isFocused
-			})}
-			// onClick={handleRowClick}
-			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">
-					{/* <Checkbox
-						checked={personalLink.completed}
-						onClick={e => e.stopPropagation()}
-						onCheckedChange={() => {
-							personalLink.completed = !personalLink.completed
-						}}
-						className="border-muted-foreground border"
-					/> */}
-					<Popover>
-						<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)} />
-								)}
-							</Button>
-						</PopoverTrigger>
-						<PopoverContent
-							className="w-52 rounded-lg p-0"
-							side="bottom"
-							align="start"
-							onCloseAutoFocus={e => e.preventDefault()}
-						>
-							<Command>
-								<CommandInput placeholder="Search state..." className="h-9" />
-								<CommandList>
-									<ScrollArea>
-										<CommandGroup>
-											{LEARNING_STATES.map(ls => (
-												<CommandItem
-													key={ls.value}
-													value={ls.value}
-													onSelect={value => {
-														personalLink.learningState = value as "wantToLearn" | "learning" | "learned" | undefined
-													}}
-												>
-													<LaIcon name={ls.icon} className={cn("mr-2", ls.className)} />
-													<span className={ls.className}>{ls.label}</span>
-													<LaIcon
-														name="Check"
-														size={16}
-														className={cn(
-															"absolute right-3",
-															ls.value === personalLink.learningState ? "text-primary" : "text-transparent"
-														)}
-													/>
-												</CommandItem>
-											))}
-										</CommandGroup>
-									</ScrollArea>
-								</CommandList>
-							</Command>
-						</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">
-									<LinkIcon
-										aria-hidden="true"
-										className="text-muted-foreground group-hover:text-primary size-3 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>
-					</div>
-				</div>
-
-				<div className="flex shrink-0 items-center gap-x-4">
-					{personalLink.topic && <Badge variant="secondary">{personalLink.topic.prettyName}</Badge>}
-					{showDeleteIconForLinkId === personalLink.id && (
-						<Button
-							size="icon"
-							className="text-destructive h-auto w-auto bg-transparent hover:bg-transparent hover:text-red-500"
-							onClick={e => {
-								e.stopPropagation()
-								handleDelete(e, personalLink)
-							}}
-						>
-							<Trash2Icon size={16} />
-						</Button>
-					)}
-				</div>
-			</div>
-		</li>
-	)
-}

web/components/routes/link/list.tsx

@@ -7,45 +7,54 @@ import {
 	PointerSensor,
 	useSensor,
 	useSensors,
-	DragEndEvent
+	DragEndEvent,
+	DragStartEvent,
+	UniqueIdentifier
 } from "@dnd-kit/core"
 import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable"
 import { useAccount } from "@/lib/providers/jazz-provider"
 import { PersonalLinkLists } from "@/lib/schema/personal-link"
-import { PersonalLink } from "@/lib/schema/personal-link"
 import { useAtom } from "jotai"
-import { linkEditIdAtom, linkSortAtom } from "@/store/link"
+import { linkSortAtom } from "@/store/link"
 import { useKey } from "react-use"
-import { useConfirm } from "@omit/react-confirm-dialog"
-import { ListItem } from "./list-item"
-import { useRef, useState, useCallback, useEffect } from "react"
+import { LinkItem } from "./partials/link-item"
+import { useRef, useState, useCallback, useEffect, useMemo } from "react"
 import { learningStateAtom } from "./header"
+import { useQueryState } from "nuqs"
 
-const LinkList = () => {
+interface LinkListProps {}
+
+const LinkList: React.FC<LinkListProps> = () => {
+	const [editId, setEditId] = useQueryState("editId")
 	const [activeLearningState] = useAtom(learningStateAtom)
-	const confirm = useConfirm()
+
 	const { me } = useAccount({
 		root: { personalLinks: [] }
 	})
-	const personalLinks = me?.root?.personalLinks || []
+	const personalLinks = useMemo(() => me?.root?.personalLinks || [], [me?.root?.personalLinks])
 
-	const [editId, setEditId] = useAtom(linkEditIdAtom)
 	const [sort] = useAtom(linkSortAtom)
 	const [focusedId, setFocusedId] = useState<string | null>(null)
-	const [draggingId, setDraggingId] = useState<string | null>(null)
+	const [draggingId, setDraggingId] = useState<UniqueIdentifier | null>(null)
 	const linkRefs = useRef<{ [key: string]: HTMLLIElement | null }>({})
-	const [showDeleteIconForLinkId, setShowDeleteIconForLinkId] = useState<string | null>(null)
 
-	let filteredLinks = personalLinks.filter(link => {
-		if (activeLearningState === "all") return true
-		if (!link?.learningState) return false
-		return link.learningState === activeLearningState
-	})
-	let sortedLinks =
-		sort === "title" && filteredLinks
-			? [...filteredLinks].sort((a, b) => (a?.title || "").localeCompare(b?.title || ""))
-			: filteredLinks
-	sortedLinks = sortedLinks || []
+	const filteredLinks = useMemo(
+		() =>
+			personalLinks.filter(link => {
+				if (activeLearningState === "all") return true
+				if (!link?.learningState) return false
+				return link.learningState === activeLearningState
+			}),
+		[personalLinks, activeLearningState]
+	)
+
+	const sortedLinks = useMemo(
+		() =>
+			sort === "title"
+				? [...filteredLinks].sort((a, b) => (a?.title || "").localeCompare(b?.title || ""))
+				: filteredLinks,
+		[filteredLinks, sort]
+	)
 
 	const sensors = useSensors(
 		useSensor(PointerSensor, {
@@ -68,6 +77,14 @@ const LinkList = () => {
 		}
 	})
 
+	const updateSequences = useCallback((links: PersonalLinkLists) => {
+		links.forEach((link, index) => {
+			if (link) {
+				link.sequence = index
+			}
+		})
+	}, [])
+
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
 			if (!me?.root?.personalLinks || sortedLinks.length === 0 || editId !== null) return
@@ -120,21 +137,16 @@ const LinkList = () => {
 
 		window.addEventListener("keydown", handleKeyDown)
 		return () => window.removeEventListener("keydown", handleKeyDown)
-	}, [me?.root?.personalLinks, sortedLinks, focusedId, editId, sort])
+	}, [me?.root?.personalLinks, sortedLinks, focusedId, editId, sort, updateSequences])
 
-	const updateSequences = (links: PersonalLinkLists) => {
-		links.forEach((link, index) => {
-			if (link) {
-				link.sequence = index
-			}
-		})
-	}
-
-	const handleDragStart = (event: any) => {
-		if (sort !== "manual") return
-		const { active } = event
-		setDraggingId(active.id)
-	}
+	const handleDragStart = useCallback(
+		(event: DragStartEvent) => {
+			if (sort !== "manual") return
+			const { active } = event
+			setDraggingId(active.id)
+		},
+		[sort]
+	)
 
 	const handleDragEnd = (event: DragEndEvent) => {
 		const { active, over } = event
@@ -181,20 +193,8 @@ const LinkList = () => {
 		setDraggingId(null)
 	}
 
-	const handleDelete = (linkItem: PersonalLink) => {
-		if (!me?.root?.personalLinks) return
-
-		const index = me.root.personalLinks.findIndex(item => item?.id === linkItem.id)
-		if (index === -1) {
-			console.error("Delete operation fail", { index, linkItem })
-			return
-		}
-
-		me.root.personalLinks.splice(index, 1)
-	}
-
 	return (
-		<div className="relative z-20">
+		<div className="mb-14 flex w-full flex-1 flex-col overflow-y-auto [scrollbar-gutter:stable]">
 			<DndContext
 				sensors={sensors}
 				collisionDetection={closestCenter}
@@ -206,9 +206,8 @@ const LinkList = () => {
 						{sortedLinks.map(
 							linkItem =>
 								linkItem && (
-									<ListItem
+									<LinkItem
 										key={linkItem.id}
-										confirm={confirm}
 										isEditing={editId === linkItem.id}
 										setEditId={setEditId}
 										personalLink={linkItem}
@@ -217,9 +216,6 @@ const LinkList = () => {
 										isDragging={draggingId === linkItem.id}
 										isFocused={focusedId === linkItem.id}
 										setFocusedId={setFocusedId}
-										onDelete={handleDelete}
-										showDeleteIconForLinkId={showDeleteIconForLinkId}
-										setShowDeleteIconForLinkId={setShowDeleteIconForLinkId}
 									/>
 								)
 						)}

web/components/routes/link/manage.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import React from "react"
+import { linkShowCreateAtom } from "@/store/link"
+import { useAtom } from "jotai"
+import { useKey } from "react-use"
+import { LinkForm } from "./partials/form/link-form"
+import { motion, AnimatePresence } from "framer-motion"
+
+interface LinkManageProps {}
+
+const LinkManage: React.FC<LinkManageProps> = () => {
+	const [showCreate, setShowCreate] = useAtom(linkShowCreateAtom)
+
+	const handleFormClose = () => setShowCreate(false)
+	const handleFormFail = () => {}
+
+	useKey("Escape", handleFormClose)
+
+	return (
+		<AnimatePresence>
+			{showCreate && (
+				<motion.div
+					initial={{ height: 0, opacity: 0 }}
+					animate={{ height: "auto", opacity: 1 }}
+					exit={{ height: 0, opacity: 0 }}
+					transition={{ duration: 0.1 }}
+				>
+					<LinkForm onClose={handleFormClose} onSuccess={handleFormClose} onFail={handleFormFail} />
+				</motion.div>
+			)}
+		</AnimatePresence>
+	)
+}
+
+LinkManage.displayName = "LinkManage"
+
+export { LinkManage }

web/components/routes/link/partials/form/description-input.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { useFormContext } from "react-hook-form"
 import { FormField, FormItem, FormControl, FormLabel } from "@/components/ui/form"
 import { TextareaAutosize } from "@/components/custom/textarea-autosize"
-import { LinkFormValues } from "../schema"
+import { LinkFormValues } from "./schema"
 
 interface DescriptionInputProps {}
 

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

@@ -8,17 +8,19 @@ import { createLinkSchema, LinkFormValues } from "./schema"
 import { cn, generateUniqueSlug } from "@/lib/utils"
 import { Form } from "@/components/ui/form"
 import { Button } from "@/components/ui/button"
-import { UrlInput } from "./partial/url-input"
-import { UrlBadge } from "./partial/url-badge"
-import { TitleInput } from "./partial/title-input"
-import { NotesSection } from "./partial/notes-section"
-import { TopicSelector } from "./partial/topic-selector"
-import { DescriptionInput } from "./partial/description-input"
-import { LearningStateSelector } from "./partial/learning-state-selector"
+import { UrlInput } from "./url-input"
+import { UrlBadge } from "./url-badge"
+import { TitleInput } from "./title-input"
+import { NotesSection } from "./notes-section"
+import { TopicSelector } from "./topic-selector"
+import { DescriptionInput } from "./description-input"
 import { atom, useAtom } from "jotai"
 import { linkLearningStateSelectorAtom, linkTopicSelectorAtom } from "@/store/link"
+import { FormField, FormItem, FormLabel } from "@/components/ui/form"
+import { LearningStateSelector } from "@/components/custom/learning-state-selector"
 
 export const globalLinkFormExceptionRefsAtom = atom<React.RefObject<HTMLElement>[]>([])
+
 interface LinkFormProps extends React.ComponentPropsWithoutRef<"form"> {
 	onClose?: () => void
 	onSuccess?: () => void
@@ -34,7 +36,7 @@ const defaultValues: Partial<LinkFormValues> = {
 	description: "",
 	completed: false,
 	notes: "",
-	learningState: "wantToLearn",
+	learningState: undefined,
 	topic: null
 }
 
@@ -45,7 +47,7 @@ export const LinkForm: React.FC<LinkFormProps> = ({
 	onClose,
 	exceptionsRefs = []
 }) => {
-	const [selectedTopic, setSelectedTopic] = React.useState<Topic | null>(null)
+	const [selectedTopic, setSelectedTopic] = React.useState<Topic | undefined>()
 	const [istopicSelectorOpen] = useAtom(linkTopicSelectorAtom)
 	const [islearningStateSelectorOpen] = useAtom(linkLearningStateSelectorAtom)
 	const [globalExceptionRefs] = useAtom(globalLinkFormExceptionRefsAtom)
@@ -134,12 +136,19 @@ export const LinkForm: React.FC<LinkFormProps> = ({
 
 	const onSubmit = (values: LinkFormValues) => {
 		if (isFetching) return
+
 		try {
 			const personalLinks = me.root?.personalLinks?.toJSON() || []
 			const slug = generateUniqueSlug(personalLinks, values.title)
 
 			if (selectedLink) {
-				selectedLink.applyDiff({ ...values, slug, topic: selectedTopic })
+				const { topic, ...diffValues } = values
+
+				if (!selectedTopic) {
+					selectedLink.applyDiff({ ...diffValues, slug, updatedAt: new Date() })
+				} else {
+					selectedLink.applyDiff({ ...values, slug, topic: selectedTopic })
+				}
 			} else {
 				const newPersonalLink = PersonalLink.create(
 					{
@@ -188,7 +197,23 @@ export const LinkForm: React.FC<LinkFormProps> = ({
 								{urlFetched && <TitleInput urlFetched={urlFetched} />}
 
 								<div className="flex flex-row items-center gap-2">
-									<LearningStateSelector />
+									<FormField
+										control={form.control}
+										name="learningState"
+										render={({ field }) => (
+											<FormItem className="space-y-0">
+												<FormLabel className="sr-only">Topic</FormLabel>
+												<LearningStateSelector
+													value={field.value}
+													onChange={value => {
+														// toggle, if already selected set undefined
+														form.setValue("learningState", field.value === value ? undefined : value)
+													}}
+													showSearch={false}
+												/>
+											</FormItem>
+										)}
+									/>
 									<TopicSelector onSelect={topic => setSelectedTopic(topic)} />
 								</div>
 							</div>

web/components/routes/link/partials/form/notes-section.tsx

@@ -3,7 +3,7 @@ import { useFormContext } from "react-hook-form"
 import { Input } from "@/components/ui/input"
 import { cn } from "@/lib/utils"
 import { LaIcon } from "@/components/custom/la-icon"
-import { LinkFormValues } from "../schema"
+import { LinkFormValues } from "./schema"
 
 export const NotesSection: React.FC = () => {
 	const form = useFormContext<LinkFormValues>()
@@ -18,7 +18,7 @@ export const NotesSection: React.FC = () => {
 					<FormControl>
 						<>
 							<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-								<LaIcon name="Pencil" aria-hidden="true" className="text-muted-foreground/70 size-3" />
+								<LaIcon name="Pencil" aria-hidden="true" className="text-muted-foreground/70" />
 							</div>
 
 							<Input

web/components/routes/link/partials/form/schema.ts

@@ -8,7 +8,7 @@ export const createLinkSchema = z.object({
 	description: z.string().optional(),
 	completed: z.boolean().default(false),
 	notes: z.string().optional(),
-	learningState: z.enum(["wantToLearn", "learning", "learned"]),
+	learningState: z.enum(["wantToLearn", "learning", "learned"]).optional(),
 	topic: z.string().nullable().optional()
 })
 

web/components/routes/link/partials/form/title-input.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { useFormContext } from "react-hook-form"
 import { FormField, FormItem, FormControl, FormLabel } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
-import { LinkFormValues } from "../schema"
+import { LinkFormValues } from "./schema"
 
 interface TitleInputProps {
 	urlFetched: string | null

web/components/routes/link/partials/form/topic-selector.tsx

@@ -7,7 +7,7 @@ import { useFormContext } from "react-hook-form"
 import { cn } from "@/lib/utils"
 import { useAtom } from "jotai"
 import { linkTopicSelectorAtom } from "@/store/link"
-import { LinkFormValues } from "../schema"
+import { LinkFormValues } from "./schema"
 import { useCoState } from "@/lib/providers/jazz-provider"
 import { PublicGlobalGroup } from "@/lib/schema/master/public-group"
 import { ID } from "jazz-tools"

web/components/routes/link/partials/form/url-badge.tsx

@@ -3,7 +3,7 @@ import { useFormContext } from "react-hook-form"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { LaIcon } from "@/components/custom/la-icon"
-import { LinkFormValues } from "../schema"
+import { LinkFormValues } from "./schema"
 
 interface UrlBadgeProps {
 	urlFetched: string | null

web/components/routes/link/partials/form/url-input.tsx

@@ -3,7 +3,7 @@ import { useFormContext } from "react-hook-form"
 import { FormField, FormItem, FormControl, FormLabel, FormMessage } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
 import { cn } from "@/lib/utils"
-import { LinkFormValues } from "../schema"
+import { LinkFormValues } from "./schema"
 import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip"
 import { TooltipArrow } from "@radix-ui/react-tooltip"
 

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

@@ -0,0 +1,182 @@
+"use client"
+
+import React, { useCallback, useMemo } from "react"
+import Image from "next/image"
+import Link from "next/link"
+import { useAtom } from "jotai"
+import { useSortable } from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { LaIcon } from "@/components/custom/la-icon"
+import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
+import { LearningStateSelectorContent } from "@/components/custom/learning-state-selector"
+import { PersonalLink } from "@/lib/schema/personal-link"
+import { LinkForm } from "./form/link-form"
+import { cn } from "@/lib/utils"
+import { LEARNING_STATES, LearningStateValue } from "@/lib/constants"
+import { linkOpenPopoverForIdAtom, linkShowCreateAtom } from "@/store/link"
+
+interface LinkItemProps {
+	personalLink: PersonalLink
+	disabled?: boolean
+	isEditing: boolean
+	setEditId: (id: string | null) => void
+	isDragging: boolean
+	isFocused: boolean
+	setFocusedId: (id: string | null) => void
+	registerRef: (id: string, ref: HTMLLIElement | null) => void
+}
+
+export const LinkItem: React.FC<LinkItemProps> = ({
+	isEditing,
+	setEditId,
+	personalLink,
+	disabled = false,
+	isDragging,
+	isFocused,
+	setFocusedId,
+	registerRef
+}) => {
+	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 refCallback = useCallback(
+		(node: HTMLLIElement | null) => {
+			setNodeRef(node)
+			registerRef(personalLink.id, node)
+		},
+		[setNodeRef, registerRef, personalLink.id]
+	)
+
+	const handleKeyDown = useCallback(
+		(e: React.KeyboardEvent) => {
+			if (e.key === "Enter") {
+				e.preventDefault()
+				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 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={() => {}} />
+	}
+
+	return (
+		<li
+			ref={refCallback}
+			style={style as React.CSSProperties}
+			{...attributes}
+			{...listeners}
+			tabIndex={0}
+			onFocus={() => setFocusedId(personalLink.id)}
+			onBlur={() => setFocusedId(null)}
+			onKeyDown={handleKeyDown}
+			className={cn("relative flex h-14 cursor-default items-center outline-none xl:h-11", {
+				"bg-muted-foreground/10": isFocused,
+				"hover:bg-muted/50": !isFocused
+			})}
+			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>
+
+					{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>
+					</div>
+				</div>
+
+				<div className="flex shrink-0 items-center gap-x-4">
+					{personalLink.topic && <Badge variant="secondary">{personalLink.topic.prettyName}</Badge>}
+				</div>
+			</div>
+		</li>
+	)
+}

web/components/routes/page/detail/PageDetailRoute.tsx

@@ -10,21 +10,19 @@ import { Content, EditorContent, useEditor } from "@tiptap/react"
 import { StarterKit } from "@/components/la-editor/extensions/starter-kit"
 import { Paragraph } from "@/components/la-editor/extensions/paragraph"
 import { useAccount, useCoState } from "@/lib/providers/jazz-provider"
-import { toast } from "sonner"
 import { EditorView } from "@tiptap/pm/view"
 import { Editor } from "@tiptap/core"
 import { generateUniqueSlug } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { LaIcon } from "@/components/custom/la-icon"
 import { pageTopicSelectorAtom } from "@/store/page"
-import { TopicSelector } from "@/components/routes/link/form/partial/topic-selector"
+import { TopicSelector } from "@/components/routes/link/partials/form/topic-selector"
+import { FocusClasses } from "@tiptap/extension-focus"
 import DeletePageModal from "@/components/custom/delete-modal"
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
-import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
 
-const TITLE_PLACEHOLDER = "Page title"
+const TITLE_PLACEHOLDER = "Untitled"
 
-export function DetailPageWrapper({ pageId }: { pageId: string }) {
+export function PageDetailRoute({ pageId }: { pageId: string }) {
 	const page = useCoState(PersonalPage, pageId as ID<PersonalPage>)
 
 	if (!page) return <div>Loading...</div>
@@ -45,32 +43,52 @@ export const DetailPageForm = ({ page }: { page: PersonalPage }) => {
 	const titleEditorRef = useRef<Editor | null>(null)
 	const contentEditorRef = useRef<LAEditorRef>(null)
 	const [, setTopicSelectorOpen] = useAtom(pageTopicSelectorAtom)
-	const [selectedPageTopic, setSelectedPageTopic] = useState<Topic | null>(page.topic || null)
+	const [, setSelectedPageTopic] = useState<Topic | null>(page.topic || null)
 	const [deleteModalOpen, setDeleteModalOpen] = useState(false)
 
+	const isTitleInitialMount = useRef(true)
+	const isContentInitialMount = useRef(true)
+
 	const updatePageContent = (content: Content, model: PersonalPage) => {
-		model.content = content
-	}
-
-	const handleTitleBlur = (editor: Editor) => {
-		const newTitle = editor.getText().trim()
-
-		if (!newTitle) {
-			toast.error("Update failed", {
-				description: "Title must be longer than or equal to 1 character"
-			})
-			editor.commands.setContent(page.title)
+		if (isContentInitialMount.current) {
+			isContentInitialMount.current = false
 			return
 		}
 
-		if (newTitle === page.title) return
+		console.log("Updating page content")
+		model.content = content
+		model.updatedAt = new Date()
+	}
 
+	const handleUpdateTitle = (editor: Editor) => {
+		if (isTitleInitialMount.current) {
+			isTitleInitialMount.current = false
+			return
+		}
+
+		/*
+		 * The logic changed, but we keep this commented code for reference
+		 */
+		// const newTitle = editor.getText().trim()
+
+		// if (!newTitle) {
+		// toast.error("Update failed", {
+		// 	description: "Title must be longer than or equal to 1 character"
+		// })
+		// 	editor.commands.setContent(page.title || "")
+		// 	return
+		// }
+
+		// if (newTitle === page.title) return
+
+		console.log("Updating page title")
 		const personalPages = me.root?.personalPages?.toJSON() || []
-		const slug = generateUniqueSlug(personalPages, page.slug)
+		const slug = generateUniqueSlug(personalPages, page.slug || "")
 
 		const trimmedTitle = editor.getText().trim()
 		page.title = trimmedTitle
 		page.slug = slug
+		page.updatedAt = new Date()
 
 		editor.commands.setContent(trimmedTitle)
 	}
@@ -108,7 +126,9 @@ export const DetailPageForm = ({ page }: { page: PersonalPage }) => {
 
 	const titleEditor = useEditor({
 		immediatelyRender: false,
+		autofocus: true,
 		extensions: [
+			FocusClasses,
 			Paragraph,
 			StarterKit.configure({
 				bold: false,
@@ -137,10 +157,12 @@ export const DetailPageForm = ({ page }: { page: PersonalPage }) => {
 			handleKeyDown: handleTitleKeyDown
 		},
 		onCreate: ({ editor }) => {
-			const capitalizedTitle = page.title.charAt(0).toUpperCase() + page.title.slice(1)
-			editor.commands.setContent(`<p>${capitalizedTitle}</p>`)
+			if (page.title) editor.commands.setContent(`<p>${page.title}</p>`)
 		},
-		onBlur: ({ editor }) => handleTitleBlur(editor)
+		onBlur: ({ editor }) => handleUpdateTitle(editor),
+		onUpdate: ({ editor }) => {
+			handleUpdateTitle(editor)
+		}
 	})
 
 	useEffect(() => {
@@ -149,6 +171,11 @@ export const DetailPageForm = ({ page }: { page: PersonalPage }) => {
 		}
 	}, [titleEditor])
 
+	useEffect(() => {
+		isTitleInitialMount.current = true
+		isContentInitialMount.current = true
+	}, [])
+
 	return (
 		<div tabIndex={0} className="relative flex grow flex-col overflow-y-auto">
 			<div className="relative mx-auto flex h-full w-[calc(100%-40px)] shrink-0 grow flex-col sm:w-[calc(100%-80px)]">
@@ -156,7 +183,7 @@ export const DetailPageForm = ({ page }: { page: PersonalPage }) => {
 					<div className="mb-2 mt-8 flex flex-row justify-between py-1.5">
 						<EditorContent
 							editor={titleEditor}
-							className="la-editor cursor-text select-text text-2xl font-semibold leading-[calc(1.33333)] tracking-[-0.00625rem]"
+							className="la-editor no-command grow cursor-text select-text text-2xl font-semibold leading-[calc(1.33333)] tracking-[-0.00625rem]"
 						/>
 						<div className="items-center space-x-4">
 							<TopicSelector
@@ -201,7 +228,7 @@ export const DetailPageForm = ({ page }: { page: PersonalPage }) => {
 				onConfirm={() => {
 					confirmDelete(page)
 				}}
-				title={page.title.charAt(0).toUpperCase() + page.title.slice(1)}
+				title={page.title || ""}
 			/>
 		</div>
 	)

web/components/routes/page/detail/header.tsx

@@ -2,20 +2,11 @@
 
 import * as React from "react"
 import { ContentHeader, SidebarToggleButton } from "@/components/custom/content-header"
-import {
-	Breadcrumb,
-	BreadcrumbItem,
-	BreadcrumbList,
-	BreadcrumbPage,
-	BreadcrumbSeparator
-} from "@/components/ui/breadcrumb"
-import { useCoState } from "@/lib/providers/jazz-provider"
+import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage } from "@/components/ui/breadcrumb"
 import { PersonalPage } from "@/lib/schema/personal-page"
 import { ID } from "jazz-tools"
 
 export const DetailPageHeader = ({ pageId }: { pageId: ID<PersonalPage> }) => {
-	const page = useCoState(PersonalPage, pageId)
-
 	return (
 		<ContentHeader>
 			<div className="flex min-w-0 gap-2">

web/components/routes/topics/detail/Header.tsx

@@ -1,32 +1,98 @@
 "use client"
 
 import * as React from "react"
-import { Button } from "@/components/ui/button"
 import { ContentHeader, SidebarToggleButton } from "@/components/custom/content-header"
-import { Topic } from "@/lib/schema"
+import { ListOfTopics, Topic } from "@/lib/schema"
+import { LearningStateSelector } from "@/components/custom/learning-state-selector"
+import { useAccount } from "@/lib/providers/jazz-provider"
+import { LearningStateValue } from "@/lib/constants"
 
 interface TopicDetailHeaderProps {
 	topic: Topic
 }
 
 export const TopicDetailHeader = React.memo(function TopicDetailHeader({ topic }: TopicDetailHeaderProps) {
+	const { me } = useAccount({
+		root: {
+			topicsWantToLearn: [],
+			topicsLearning: [],
+			topicsLearned: []
+		}
+	})
+
+	let p: {
+		index: number
+		topic?: Topic | null
+		learningState: LearningStateValue
+	} | null = null
+
+	const wantToLearnIndex = me?.root.topicsWantToLearn.findIndex(t => t?.id === topic.id) ?? -1
+	if (wantToLearnIndex !== -1) {
+		p = {
+			index: wantToLearnIndex,
+			topic: me?.root.topicsWantToLearn[wantToLearnIndex],
+			learningState: "wantToLearn"
+		}
+	}
+
+	const learningIndex = me?.root.topicsLearning.findIndex(t => t?.id === topic.id) ?? -1
+	if (learningIndex !== -1) {
+		p = {
+			index: learningIndex,
+			topic: me?.root.topicsLearning[learningIndex],
+			learningState: "learning"
+		}
+	}
+
+	const learnedIndex = me?.root.topicsLearned.findIndex(t => t?.id === topic.id) ?? -1
+	if (learnedIndex !== -1) {
+		p = {
+			index: learnedIndex,
+			topic: me?.root.topicsLearned[learnedIndex],
+			learningState: "learned"
+		}
+	}
+
+	const handleAddToProfile = (learningState: LearningStateValue) => {
+		const topicLists: Record<LearningStateValue, (ListOfTopics | null) | undefined> = {
+			wantToLearn: me?.root.topicsWantToLearn,
+			learning: me?.root.topicsLearning,
+			learned: me?.root.topicsLearned
+		}
+
+		const removeFromList = (state: LearningStateValue, index: number) => {
+			topicLists[state]?.splice(index, 1)
+		}
+
+		if (p) {
+			if (learningState === p.learningState) {
+				removeFromList(p.learningState, p.index)
+				return
+			}
+			removeFromList(p.learningState, p.index)
+		}
+
+		topicLists[learningState]?.push(topic)
+	}
+
 	return (
-		<>
-			<ContentHeader className="px-6 py-5 max-lg:px-4">
-				<div className="flex min-w-0 shrink-0 items-center gap-1.5">
-					<SidebarToggleButton />
-					<div className="flex min-h-0 items-center">
-						<span className="truncate text-left text-xl font-bold">{topic.prettyName}</span>
-					</div>
+		<ContentHeader className="px-6 py-5 max-lg:px-4">
+			<div className="flex min-w-0 shrink-0 items-center gap-1.5">
+				<SidebarToggleButton />
+				<div className="flex min-h-0 items-center">
+					<span className="truncate text-left text-xl font-bold">{topic.prettyName}</span>
 				</div>
+			</div>
 
-				<div className="flex flex-auto"></div>
+			<div className="flex flex-auto"></div>
 
-				<Button variant="secondary" size="sm" className="gap-x-2 text-sm">
-					<span>Add to my profile</span>
-				</Button>
-			</ContentHeader>
-		</>
+			<LearningStateSelector
+				showSearch={false}
+				value={p?.learningState || ""}
+				onChange={handleAddToProfile}
+				defaultLabel="Add to my profile"
+			/>
+		</ContentHeader>
 	)
 })
 

web/components/routes/topics/detail/TopicDetailRoute.tsx

@@ -1,108 +1,41 @@
 "use client"
 
 import React from "react"
-import Link from "next/link"
-import { useCoState } from "@/lib/providers/jazz-provider"
-import { PublicGlobalGroup } from "@/lib/schema/master/public-group"
-import { ID } from "jazz-tools"
 import { TopicDetailHeader } from "./Header"
-import { LaIcon } from "@/components/custom/la-icon"
-import { cn, ensureUrlProtocol } from "@/lib/utils"
-import { Section as SectionSchema, Link as LinkSchema } from "@/lib/schema"
+import { TopicSections } from "./partials/topic-sections"
+import { useLinkNavigation } from "./use-link-navigation"
+import { useTopicData } from "@/hooks/use-topic-data"
+import { atom } from "jotai"
+import { useAccount } from "@/lib/providers/jazz-provider"
 
 interface TopicDetailRouteProps {
 	topicName: string
 }
 
+export const openPopoverForIdAtom = atom<string | null>(null)
+
 export function TopicDetailRoute({ topicName }: TopicDetailRouteProps) {
-	const topics = useCoState(PublicGlobalGroup, process.env.NEXT_PUBLIC_JAZZ_GLOBAL_GROUP as ID<PublicGlobalGroup>, {
-		root: {
-			topics: []
-		}
-	})
+	const { me } = useAccount({ root: { personalLinks: [] } })
+	const { topic, allLinks } = useTopicData(topicName)
+	const { activeIndex, setActiveIndex, containerRef, linkRefs } = useLinkNavigation(allLinks)
 
-	const topic = topics?.root.topics.find(topic => topic?.name === topicName)
-
-	if (!topic) {
+	if (!topic || !me) {
 		return null
 	}
 
 	return (
 		<div className="flex h-full flex-auto flex-col">
 			<TopicDetailHeader topic={topic} />
-			<div className="flex w-full flex-1 flex-col gap-4 focus-visible:outline-none">
-				<div tabIndex={-1} className="outline-none">
-					<div className="flex flex-1 flex-col gap-4" role="listbox" aria-label="Topic sections">
-						{topic.latestGlobalGuide?.sections?.map(
-							(section, index) => section?.id && <Section key={index} section={section} />
-						)}
-					</div>
-				</div>
-			</div>
+			<TopicSections
+				topic={topic}
+				sections={topic.latestGlobalGuide?.sections}
+				activeIndex={activeIndex}
+				setActiveIndex={setActiveIndex}
+				linkRefs={linkRefs}
+				containerRef={containerRef}
+				me={me}
+				personalLinks={me.root.personalLinks}
+			/>
 		</div>
 	)
 }
-
-interface SectionProps {
-	section: SectionSchema
-}
-
-function Section({ section }: SectionProps) {
-	return (
-		<div className="flex flex-col">
-			<div className="flex items-center gap-4 px-4 py-2">
-				<p className="text-foreground text-sm font-medium">{section.title}</p>
-				<div className="border-b-secondary flex-1 border-b"></div>
-			</div>
-
-			<div className="flex flex-col gap-px py-2">
-				{section.links?.map((link, index) => link?.url && <LinkItem key={index} link={link} />)}
-			</div>
-		</div>
-	)
-}
-
-interface LinkItemProps {
-	link: LinkSchema
-}
-
-function LinkItem({ link }: LinkItemProps) {
-	return (
-		<li
-			tabIndex={0}
-			className={cn("hover:bg-muted/50 relative flex h-14 cursor-default items-center outline-none xl:h-11")}
-		>
-			<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">
-					<LaIcon name="GraduationCap" className="size-5" />
-					<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">
-								{link.title}
-							</p>
-
-							<div className="group flex items-center gap-x-1">
-								<LaIcon
-									name="Link"
-									aria-hidden="true"
-									className="text-muted-foreground group-hover:text-primary size-3 flex-none"
-								/>
-								<Link
-									href={ensureUrlProtocol(link.url)}
-									passHref
-									prefetch={false}
-									target="_blank"
-									onClick={e => e.stopPropagation()}
-									className="text-muted-foreground hover:text-primary text-xs"
-								>
-									<span className="xl:truncate">{link.url}</span>
-								</Link>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div className="flex shrink-0 items-center gap-x-4"></div>
-			</div>
-		</li>
-	)
-}

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

@@ -0,0 +1,198 @@
+import React, { useCallback, useMemo, useState } from "react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { useAtom } from "jotai"
+import { toast } from "sonner"
+
+import { LaIcon } from "@/components/custom/la-icon"
+import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
+import { Button } from "@/components/ui/button"
+import { LearningStateSelectorContent } from "@/components/custom/learning-state-selector"
+
+import { cn, ensureUrlProtocol, generateUniqueSlug } from "@/lib/utils"
+import { LaAccount, Link as LinkSchema, PersonalLink, PersonalLinkLists, Topic, UserRoot } from "@/lib/schema"
+import { openPopoverForIdAtom } from "../TopicDetailRoute"
+import { LEARNING_STATES, LearningStateValue } from "@/lib/constants"
+
+interface LinkItemProps {
+	topic: Topic
+	link: LinkSchema
+	isActive: boolean
+	index: number
+	setActiveIndex: (index: number) => void
+	me: {
+		root: {
+			personalLinks: PersonalLinkLists
+		} & UserRoot
+	} & LaAccount
+	personalLinks: PersonalLinkLists
+}
+
+export const LinkItem = React.memo(
+	React.forwardRef<HTMLLIElement, LinkItemProps>(
+		({ topic, link, isActive, index, setActiveIndex, me, personalLinks }, ref) => {
+			const router = useRouter()
+			const [, setOpenPopoverForId] = useAtom(openPopoverForIdAtom)
+			const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+
+			const personalLink = useMemo(() => {
+				return personalLinks.find(pl => pl?.link?.id === link.id)
+			}, [personalLinks, link.id])
+
+			const selectedLearningState = useMemo(() => {
+				return LEARNING_STATES.find(ls => ls.value === personalLink?.learningState)
+			}, [personalLink?.learningState])
+
+			const handleClick = useCallback(
+				(e: React.MouseEvent) => {
+					e.preventDefault()
+					setActiveIndex(index)
+				},
+				[index, setActiveIndex]
+			)
+
+			const handleSelectLearningState = useCallback(
+				(learningState: LearningStateValue) => {
+					const defaultToast = {
+						duration: 5000,
+						position: "bottom-right" as const,
+						closeButton: true,
+						action: {
+							label: "Go to list",
+							onClick: () => router.push("/")
+						}
+					}
+
+					if (personalLink) {
+						if (personalLink.learningState === learningState) {
+							personalLink.learningState = undefined
+							toast.error("Link learning state removed", defaultToast)
+						} else {
+							personalLink.learningState = learningState
+							toast.success("Link learning state updated", defaultToast)
+						}
+					} else {
+						const slug = generateUniqueSlug(personalLinks.toJSON(), link.title)
+						const newPersonalLink = PersonalLink.create(
+							{
+								url: link.url,
+								title: link.title,
+								slug,
+								link,
+								learningState,
+								sequence: personalLinks.length + 1,
+								completed: false,
+								topic,
+								createdAt: new Date(),
+								updatedAt: new Date()
+							},
+							{ owner: me }
+						)
+
+						personalLinks.push(newPersonalLink)
+
+						toast.success("Link added.", {
+							...defaultToast,
+							description: `${link.title} has been added to your personal link.`
+						})
+					}
+
+					setOpenPopoverForId(null)
+					setIsPopoverOpen(false)
+				},
+				[personalLink, personalLinks, me, link, router, setOpenPopoverForId]
+			)
+
+			const handlePopoverOpenChange = useCallback(
+				(open: boolean) => {
+					setIsPopoverOpen(open)
+					setOpenPopoverForId(open ? link.id : null)
+				},
+				[link.id, setOpenPopoverForId]
+			)
+
+			return (
+				<li
+					ref={ref}
+					tabIndex={0}
+					onClick={handleClick}
+					className={cn("relative flex h-14 cursor-pointer items-center outline-none xl:h-11", {
+						"bg-muted-foreground/10": isActive,
+						"hover:bg-muted/50": !isActive
+					})}
+				>
+					<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={isPopoverOpen} onOpenChange={handlePopoverOpenChange}>
+								<PopoverTrigger asChild>
+									<Button
+										size="sm"
+										type="button"
+										role="combobox"
+										variant="secondary"
+										className={cn("size-7 shrink-0 p-0", "hover:bg-accent-foreground/10")}
+										onClick={e => e.stopPropagation()}
+									>
+										{selectedLearningState?.icon ? (
+											<LaIcon name={selectedLearningState.icon} className={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={(value: string) => handleSelectLearningState(value as LearningStateValue)}
+									/>
+								</PopoverContent>
+							</Popover>
+
+							<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={cn(
+											"text-primary hover:text-primary line-clamp-1 text-sm font-medium xl:truncate",
+											isActive && "font-bold"
+										)}
+									>
+										{link.title}
+									</p>
+
+									<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={ensureUrlProtocol(link.url)}
+											passHref
+											prefetch={false}
+											target="_blank"
+											onClick={e => e.stopPropagation()}
+											className="text-muted-foreground hover:text-primary text-xs"
+										>
+											<span className="xl:truncate">{link.url}</span>
+										</Link>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div className="flex shrink-0 items-center gap-x-4"></div>
+					</div>
+				</li>
+			)
+		}
+	)
+)
+
+LinkItem.displayName = "LinkItem"

web/components/routes/topics/detail/partials/section.tsx

@@ -0,0 +1,59 @@
+import React from "react"
+import { LinkItem } from "./link-item"
+import { LaAccount, PersonalLinkLists, Section as SectionSchema, Topic, UserRoot } from "@/lib/schema"
+
+interface SectionProps {
+	topic: Topic
+	section: SectionSchema
+	activeIndex: number
+	startIndex: number
+	linkRefs: React.MutableRefObject<(HTMLLIElement | null)[]>
+	setActiveIndex: (index: number) => void
+	me: {
+		root: {
+			personalLinks: PersonalLinkLists
+		} & UserRoot
+	} & LaAccount
+	personalLinks: PersonalLinkLists
+}
+
+export function Section({
+	topic,
+	section,
+	activeIndex,
+	setActiveIndex,
+	startIndex,
+	linkRefs,
+	me,
+	personalLinks
+}: SectionProps) {
+	return (
+		<div className="flex flex-col">
+			<div className="flex items-center gap-4 px-6 py-2 max-lg:px-4">
+				<p className="text-foreground text-sm font-medium">{section.title}</p>
+				<div className="flex-1 border-b"></div>
+			</div>
+
+			<div className="flex flex-col gap-px py-2">
+				{section.links?.map(
+					(link, index) =>
+						link?.url && (
+							<LinkItem
+								key={index}
+								topic={topic}
+								link={link}
+								isActive={activeIndex === startIndex + index}
+								index={startIndex + index}
+								setActiveIndex={setActiveIndex}
+								ref={el => {
+									linkRefs.current[startIndex + index] = el
+								}}
+								me={me}
+								personalLinks={personalLinks}
+							/>
+						)
+				)}
+			</div>
+		</div>
+	)
+}

web/components/routes/topics/detail/partials/topic-sections.tsx

@@ -0,0 +1,54 @@
+import React from "react"
+import { Section } from "./section"
+import { LaAccount, ListOfSections, PersonalLinkLists, Topic, UserRoot } from "@/lib/schema"
+
+interface TopicSectionsProps {
+	topic: Topic
+	sections: (ListOfSections | null) | undefined
+	activeIndex: number
+	setActiveIndex: (index: number) => void
+	linkRefs: React.MutableRefObject<(HTMLLIElement | null)[]>
+	containerRef: React.RefObject<HTMLDivElement>
+	me: {
+		root: {
+			personalLinks: PersonalLinkLists
+		} & UserRoot
+	} & LaAccount
+	personalLinks: PersonalLinkLists
+}
+
+export function TopicSections({
+	topic,
+	sections,
+	activeIndex,
+	setActiveIndex,
+	linkRefs,
+	containerRef,
+	me,
+	personalLinks
+}: TopicSectionsProps) {
+	return (
+		<div ref={containerRef} className="flex w-full flex-1 flex-col overflow-y-auto [scrollbar-gutter:stable]">
+			<div tabIndex={-1} className="outline-none">
+				<div className="flex flex-1 flex-col gap-4" role="listbox" aria-label="Topic sections">
+					{sections?.map(
+						(section, sectionIndex) =>
+							section?.id && (
+								<Section
+									key={sectionIndex}
+									topic={topic}
+									section={section}
+									activeIndex={activeIndex}
+									setActiveIndex={setActiveIndex}
+									startIndex={sections.slice(0, sectionIndex).reduce((acc, s) => acc + (s?.links?.length || 0), 0)}
+									linkRefs={linkRefs}
+									me={me}
+									personalLinks={personalLinks}
+								/>
+							)
+					)}
+				</div>
+			</div>
+		</div>
+	)
+}

web/components/routes/topics/detail/use-link-navigation.ts

@@ -0,0 +1,61 @@
+import { useState, useRef, useCallback, useEffect } from "react"
+import { Link as LinkSchema } from "@/lib/schema"
+import { ensureUrlProtocol } from "@/lib/utils"
+
+export function useLinkNavigation(allLinks: (LinkSchema | null)[]) {
+	const [activeIndex, setActiveIndex] = useState(-1)
+	const containerRef = useRef<HTMLDivElement>(null)
+	const linkRefs = useRef<(HTMLLIElement | null)[]>(allLinks.map(() => null))
+
+	const scrollToLink = useCallback((index: number) => {
+		if (linkRefs.current[index] && containerRef.current) {
+			const linkElement = linkRefs.current[index]
+			const container = containerRef.current
+
+			const linkRect = linkElement?.getBoundingClientRect()
+			const containerRect = container.getBoundingClientRect()
+
+			if (linkRect && containerRect) {
+				if (linkRect.bottom > containerRect.bottom) {
+					container.scrollTop += linkRect.bottom - containerRect.bottom
+				} else if (linkRect.top < containerRect.top) {
+					container.scrollTop -= containerRect.top - linkRect.top
+				}
+			}
+		}
+	}, [])
+
+	const handleKeyDown = useCallback(
+		(e: KeyboardEvent) => {
+			console.log("handleKeyDown")
+			if (e.key === "ArrowDown") {
+				e.preventDefault()
+				setActiveIndex(prevIndex => {
+					const newIndex = (prevIndex + 1) % allLinks.length
+					scrollToLink(newIndex)
+					return newIndex
+				})
+			} else if (e.key === "ArrowUp") {
+				e.preventDefault()
+				setActiveIndex(prevIndex => {
+					const newIndex = (prevIndex - 1 + allLinks.length) % allLinks.length
+					scrollToLink(newIndex)
+					return newIndex
+				})
+			} else if (e.key === "Enter" && activeIndex !== -1) {
+				const link = allLinks[activeIndex]
+				if (link) {
+					window.open(ensureUrlProtocol(link.url), "_blank")
+				}
+			}
+		},
+		[activeIndex, allLinks, scrollToLink]
+	)
+
+	useEffect(() => {
+		window.addEventListener("keydown", handleKeyDown)
+		return () => window.removeEventListener("keydown", handleKeyDown)
+	}, [handleKeyDown])
+
+	return { activeIndex, setActiveIndex, containerRef, linkRefs }
+}