chore(topic): Enhancement using virtual (#164)

* chore: use tanstack virtual

* fix: topic learning state

* chore: add skeleton loading and not found topic placeholder

* fix: personal links load in list

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

@@ -10,198 +10,199 @@ import { Button } from "@/components/ui/button"
 import { LearningStateSelectorContent } from "@/components/custom/learning-state-selector"
 
 import { cn, ensureUrlProtocol, generateUniqueSlug } from "@/lib/utils"
-import { Link as LinkSchema, PersonalLink, Topic } from "@/lib/schema"
+import { Link as LinkSchema, PersonalLink, PersonalLinkLists, Topic } from "@/lib/schema"
 import { openPopoverForIdAtom } from "../TopicDetailRoute"
 import { LEARNING_STATES, LearningStateValue } from "@/lib/constants"
 import { useAccountOrGuest } from "@/lib/providers/jazz-provider"
 import { useClerk } from "@clerk/nextjs"
 
-interface LinkItemProps {
+interface LinkItemProps extends React.ComponentPropsWithoutRef<"div"> {
 	topic: Topic
 	link: LinkSchema
 	isActive: boolean
 	index: number
 	setActiveIndex: (index: number) => void
+	personalLinks?: PersonalLinkLists
 }
 
 export const LinkItem = React.memo(
-	React.forwardRef<HTMLLIElement, LinkItemProps>(({ topic, link, isActive, index, setActiveIndex }, ref) => {
-		const clerk = useClerk()
-		const pathname = usePathname()
-		const router = useRouter()
-		const [, setOpenPopoverForId] = useAtom(openPopoverForIdAtom)
-		const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+	React.forwardRef<HTMLDivElement, LinkItemProps>(
+		({ topic, link, isActive, index, setActiveIndex, className, personalLinks, ...props }, ref) => {
+			const clerk = useClerk()
+			const pathname = usePathname()
+			const router = useRouter()
+			const [, setOpenPopoverForId] = useAtom(openPopoverForIdAtom)
+			const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+			const { me } = useAccountOrGuest()
 
-		const { me } = useAccountOrGuest({ root: { personalLinks: [] } })
+			const personalLink = useMemo(() => {
+				return personalLinks?.find(pl => pl?.link?.id === link.id)
+			}, [personalLinks, link.id])
 
-		const personalLinks = useMemo(() => {
-			if (!me || me._type === "Anonymous") return undefined
-			return me?.root?.personalLinks || []
-		}, [me])
+			const selectedLearningState = useMemo(() => {
+				return LEARNING_STATES.find(ls => ls.value === personalLink?.learningState)
+			}, [personalLink?.learningState])
 
-		const personalLink = useMemo(() => {
-			return personalLinks?.find(pl => pl?.link?.id === link.id)
-		}, [personalLinks, link.id])
+			const handleClick = useCallback(
+				(e: React.MouseEvent) => {
+					e.preventDefault()
+					setActiveIndex(index)
+				},
+				[index, setActiveIndex]
+			)
 
-		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) => {
-				if (!personalLinks || !me || me?._type === "Anonymous") {
-					return clerk.redirectToSignIn({
-						redirectUrl: pathname
-					})
-				}
-
-				const defaultToast = {
-					duration: 5000,
-					position: "bottom-right" as const,
-					closeButton: true,
-					action: {
-						label: "Go to list",
-						onClick: () => router.push("/links")
+			const handleSelectLearningState = useCallback(
+				(learningState: LearningStateValue) => {
+					if (!personalLinks || !me || me?._type === "Anonymous") {
+						return clerk.redirectToSignIn({
+							redirectUrl: pathname
+						})
 					}
-				}
 
-				if (personalLink) {
-					if (personalLink.learningState === learningState) {
-						personalLink.learningState = undefined
-						toast.error("Link learning state removed", defaultToast)
+					const defaultToast = {
+						duration: 5000,
+						position: "bottom-right" as const,
+						closeButton: true,
+						action: {
+							label: "Go to list",
+							onClick: () => router.push("/links")
+						}
+					}
+
+					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 {
-						personalLink.learningState = learningState
-						toast.success("Link learning state updated", defaultToast)
+						const slug = generateUniqueSlug(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.`
+						})
 					}
-				} else {
-					const slug = generateUniqueSlug(link.title)
-					const newPersonalLink = PersonalLink.create(
+
+					setOpenPopoverForId(null)
+					setIsPopoverOpen(false)
+				},
+				[personalLink, personalLinks, me, link, router, topic, setOpenPopoverForId, clerk, pathname]
+			)
+
+			const handlePopoverOpenChange = useCallback(
+				(open: boolean) => {
+					setIsPopoverOpen(open)
+					setOpenPopoverForId(open ? link.id : null)
+				},
+				[link.id, setOpenPopoverForId]
+			)
+
+			return (
+				<div
+					ref={ref}
+					tabIndex={0}
+					onClick={handleClick}
+					className={cn(
+						"relative flex h-14 cursor-pointer items-center outline-none xl:h-11",
 						{
-							url: link.url,
-							title: link.title,
-							slug,
-							link,
-							learningState,
-							sequence: personalLinks.length + 1,
-							completed: false,
-							topic,
-							createdAt: new Date(),
-							updatedAt: new Date()
+							"bg-muted-foreground/10": isActive,
+							"hover:bg-muted/50": !isActive
 						},
-						{ 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, topic, clerk, pathname]
-		)
-
-		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"
+						className
+					)}
+					{...props}
+				>
+					<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()}
-										className="text-muted-foreground hover:text-primary text-xs"
 									>
-										<span className="xl:truncate">{link.url}</span>
-									</Link>
+										{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",
+											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 size-3.5 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="line-clamp-1">{link.url}</span>
+										</Link>
+									</div>
 								</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

@@ -1,94 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
-import { LinkItem } from "./link-item"
-import { LaAccount, PersonalLinkLists, Section as SectionSchema, Topic, UserRoot } from "@/lib/schema"
-import { Skeleton } from "@/components/ui/skeleton"
-import { LaIcon } from "@/components/custom/la-icon"
-
-interface SectionProps {
-	topic: Topic
-	section: SectionSchema
-	activeIndex: number
-	startIndex: number
-	linkRefs: React.MutableRefObject<(HTMLLIElement | null)[]>
-	setActiveIndex: (index: number) => void
-}
-
-export function Section({ topic, section, activeIndex, setActiveIndex, startIndex, linkRefs }: SectionProps) {
-	const [nLinksToLoad, setNLinksToLoad] = useState(10)
-
-	const linksToLoad = useMemo(() => {
-		return section.links?.slice(0, nLinksToLoad)
-	}, [section.links, nLinksToLoad])
-
-	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">
-				{linksToLoad?.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
-							}}
-						/>
-					) : (
-						<Skeleton key={index} className="h-14 w-full xl:h-11" />
-					)
-				)}
-				{section.links?.length && section.links?.length > nLinksToLoad && (
-					<LoadMoreSpinner onLoadMore={() => setNLinksToLoad(n => n + 10)} />
-				)}
-			</div>
-		</div>
-	)
-}
-
-const LoadMoreSpinner = ({ onLoadMore }: { onLoadMore: () => void }) => {
-	const spinnerRef = useRef<HTMLDivElement>(null)
-
-	const handleIntersection = useCallback(
-		(entries: IntersectionObserverEntry[]) => {
-			const [entry] = entries
-			if (entry.isIntersecting) {
-				onLoadMore()
-			}
-		},
-		[onLoadMore]
-	)
-
-	useEffect(() => {
-		const observer = new IntersectionObserver(handleIntersection, {
-			root: null,
-			rootMargin: "0px",
-			threshold: 1.0
-		})
-
-		const currentSpinnerRef = spinnerRef.current
-
-		if (currentSpinnerRef) {
-			observer.observe(currentSpinnerRef)
-		}
-
-		return () => {
-			if (currentSpinnerRef) {
-				observer.unobserve(currentSpinnerRef)
-			}
-		}
-	}, [handleIntersection])
-
-	return (
-		<div ref={spinnerRef} className="flex justify-center py-4">
-			<LaIcon name="Loader" className="size-6 animate-spin" />
-		</div>
-	)
-}

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

@@ -1,44 +0,0 @@
-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>
-}
-
-export function TopicSections({
-	topic,
-	sections,
-	activeIndex,
-	setActiveIndex,
-	linkRefs,
-	containerRef,
-}: 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}
-								/>
-							)
-					)}
-				</div>
-			</div>
-		</div>
-	)
-}