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

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, ensureUrlProtocol } from "@/lib/utils"
import { LEARNING_STATES, LearningStateValue } from "@/lib/constants"
import { linkOpenPopoverForIdAtom } from "@/store/link"

interface LinkItemProps extends React.HTMLAttributes<HTMLLIElement> {
	personalLink: PersonalLink
	disabled?: boolean
	isEditing: boolean
	setEditId: (id: string | null) => void
	isDragging: boolean
	isActive: boolean
	setActiveItemIndex: (index: number | null) => void
	index: number
}

export const LinkItem = React.forwardRef<HTMLLIElement, LinkItemProps>(
	({ personalLink, disabled, isEditing, setEditId, isDragging, isActive, setActiveItemIndex, index }, ref) => {
		const [openPopoverForId, setOpenPopoverForId] = useAtom(linkOpenPopoverForIdAtom)
		const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: personalLink.id, disabled })

		const style = useMemo(
			() => ({
				transform: CSS.Transform.toString(transform),
				transition,
				pointerEvents: isDragging ? "none" : "auto"
			}),
			[transform, transition, isDragging]
		)

		const 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={node => {
					setNodeRef(node)
					if (typeof ref === "function") {
						ref(node)
					} else if (ref) {
						ref.current = node
					}
				}}
				style={style as React.CSSProperties}
				{...attributes}
				{...listeners}
				tabIndex={0}
				onFocus={() => setActiveItemIndex(index)}
				onBlur={() => setActiveItemIndex(null)}
				className={cn(
					"relative cursor-default outline-none",
					"grid grid-cols-[auto_1fr_auto] items-center gap-x-2 py-2 max-lg:px-4 sm:px-5 sm:py-2",
					{
						"bg-muted-foreground/5": isActive,
						"hover:bg-muted/50": !isActive
					}
				)}
				onDoubleClick={handleRowDoubleClick}
			>
				<Popover
					open={openPopoverForId === personalLink.id}
					onOpenChange={(open: boolean) => setOpenPopoverForId(open ? personalLink.id : null)}
				>
					<PopoverTrigger asChild>
						<Button size="sm" type="button" role="combobox" variant="secondary" className="size-7 shrink-0 p-0">
							{selectedLearningState?.icon ? (
								<LaIcon name={selectedLearningState.icon} className={cn(selectedLearningState.className)} />
							) : (
								<LaIcon name="Circle" />
							)}
						</Button>
					</PopoverTrigger>
					<PopoverContent
						className="w-52 rounded-lg p-0"
						side="bottom"
						align="start"
						onCloseAutoFocus={e => e.preventDefault()}
					>
						<LearningStateSelectorContent
							showSearch={false}
							searchPlaceholder="Search state..."
							value={personalLink.learningState}
							onSelect={handleLearningStateSelect}
						/>
					</PopoverContent>
				</Popover>

				<div className="flex min-w-0 flex-col items-start gap-y-1 overflow-hidden md:flex-row md:items-center md:gap-x-2">
					{personalLink.icon && (
						<Image
							src={personalLink.icon}
							alt={personalLink.title}
							className="size-5 shrink-0 rounded-full"
							width={16}
							height={16}
						/>
					)}
					<div className="flex min-w-0 flex-col items-start gap-y-1 overflow-hidden md:flex-row md:items-center md:gap-x-2">
						<p className="text-primary hover:text-primary truncate text-sm font-medium">{personalLink.title}</p>
						{personalLink.url && (
							<div className="text-muted-foreground flex min-w-0 shrink items-center gap-x-1">
								<LaIcon name="Link" aria-hidden="true" className="size-3 flex-none" />
								<Link
									href={ensureUrlProtocol(personalLink.url)}
									passHref
									prefetch={false}
									target="_blank"
									onClick={e => e.stopPropagation()}
									className="hover:text-primary truncate text-xs"
								>
									{personalLink.url}
								</Link>
							</div>
						)}
					</div>
				</div>

				<div className="flex shrink-0 items-center justify-end">
					{personalLink.topic && (
						<Badge variant="secondary" className="border-muted-foreground/25">
							{personalLink.topic.prettyName}
						</Badge>
					)}
				</div>
			</li>
		)
	}
)

LinkItem.displayName = "LinkItem"