Merge branch 'main' of github.com:learn-anything/learn-anything.xyz

web/components/custom/command-palette/command-palette.tsx

@@ -10,18 +10,21 @@ import { useAccount } from "@/lib/providers/jazz-provider"
 import { searchSafeRegExp, toTitleCase } from "@/lib/utils"
 import { GraphNode } from "@/components/routes/public/PublicHomeRoute"
 import { useCommandActions } from "./hooks/use-command-actions"
+import { atom, useAtom } from "jotai"
 
 let graph_data_promise = import("@/components/routes/public/graph-data.json").then(a => a.default)
 
 const filterItems = (items: CommandItemType[], searchRegex: RegExp) =>
 	items.filter(item => searchRegex.test(item.value)).slice(0, 6)
 
+export const commandPaletteOpenAtom = atom(false)
+
 export function CommandPalette() {
 	const { me } = useAccount({ root: { personalLinks: [], personalPages: [] } })
 	const dialogRef = React.useRef<HTMLDivElement | null>(null)
 	const [inputValue, setInputValue] = React.useState("")
 	const [activePage, setActivePage] = React.useState("home")
-	const [open, setOpen] = React.useState(false)
+	const [open, setOpen] = useAtom(commandPaletteOpenAtom)
 
 	const actions = useCommandActions()
 	const commandGroups = React.useMemo(() => me && createCommandGroups(actions, me), [actions, me])
@@ -38,7 +41,7 @@ export function CommandPalette() {
 
 		document.addEventListener("keydown", down)
 		return () => document.removeEventListener("keydown", down)
-	}, [])
+	}, [setOpen])
 
 	const bounce = React.useCallback(() => {
 		if (dialogRef.current) {
@@ -177,7 +180,7 @@ export function CommandPalette() {
 					closeDialog()
 			}
 		},
-		[bounce]
+		[bounce, setOpen]
 	)
 
 	const filteredCommands = React.useMemo(() => getFilteredCommands(), [getFilteredCommands])

web/components/routes/link/LinkRoute.tsx

@@ -4,7 +4,7 @@ import { LinkHeader } from "@/components/routes/link/header"
 import { LinkList } from "@/components/routes/link/list"
 import { LinkManage } from "@/components/routes/link/manage"
 import { useQueryState } from "nuqs"
-import { useEffect } from "react"
+import { useEffect, useState } from "react"
 import { useAtom } from "jotai"
 import { linkEditIdAtom } from "@/store/link"
 import { LinkBottomBar } from "./bottom-bar"
@@ -12,6 +12,7 @@ import { LinkBottomBar } from "./bottom-bar"
 export function LinkRoute() {
 	const [, setEditId] = useAtom(linkEditIdAtom)
 	const [nuqsEditId] = useQueryState("editId")
+	const [activeItemIndex, setActiveItemIndex] = useState<number | null>(null)
 
 	useEffect(() => {
 		setEditId(nuqsEditId)
@@ -21,7 +22,7 @@ export function LinkRoute() {
 		<div className="flex h-full flex-auto flex-col overflow-hidden">
 			<LinkHeader />
 			<LinkManage />
-			<LinkList />
+			<LinkList key={nuqsEditId} activeItemIndex={activeItemIndex} setActiveItemIndex={setActiveItemIndex} />
 			<LinkBottomBar />
 		</div>
 	)

web/components/routes/link/list.tsx

@@ -1,5 +1,4 @@
-"use client"
-
+import React, { useCallback, useEffect, useMemo } from "react"
 import {
 	DndContext,
 	closestCenter,
@@ -11,6 +10,7 @@ import {
 	DragStartEvent,
 	UniqueIdentifier
 } from "@dnd-kit/core"
+import { Primitive } from "@radix-ui/react-primitive"
 import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable"
 import { useAccount } from "@/lib/providers/jazz-provider"
 import { PersonalLinkLists } from "@/lib/schema/personal-link"
@@ -18,15 +18,20 @@ import { useAtom } from "jotai"
 import { linkSortAtom } from "@/store/link"
 import { useKey } from "react-use"
 import { LinkItem } from "./partials/link-item"
-import { useRef, useState, useCallback, useEffect, useMemo } from "react"
-import { learningStateAtom } from "./header"
 import { useQueryState } from "nuqs"
+import { learningStateAtom } from "./header"
+import { commandPaletteOpenAtom } from "@/components/custom/command-palette/command-palette"
 
-interface LinkListProps {}
+interface LinkListProps {
+	activeItemIndex: number | null
+	setActiveItemIndex: React.Dispatch<React.SetStateAction<number | null>>
+}
 
-const LinkList: React.FC<LinkListProps> = () => {
+const LinkList: React.FC<LinkListProps> = ({ activeItemIndex, setActiveItemIndex }) => {
+	const [isCommandPalettePpen] = useAtom(commandPaletteOpenAtom)
 	const [editId, setEditId] = useQueryState("editId")
 	const [activeLearningState] = useAtom(learningStateAtom)
+	const [draggingId, setDraggingId] = React.useState<UniqueIdentifier | null>(null)
 
 	const { me } = useAccount({
 		root: { personalLinks: [] }
@@ -34,9 +39,6 @@ const LinkList: React.FC<LinkListProps> = () => {
 	const personalLinks = useMemo(() => me?.root?.personalLinks || [], [me?.root?.personalLinks])
 
 	const [sort] = useAtom(linkSortAtom)
-	const [focusedId, setFocusedId] = useState<string | null>(null)
-	const [draggingId, setDraggingId] = useState<UniqueIdentifier | null>(null)
-	const linkRefs = useRef<{ [key: string]: HTMLLIElement | null }>({})
 
 	const filteredLinks = useMemo(
 		() =>
@@ -67,16 +69,22 @@ const LinkList: React.FC<LinkListProps> = () => {
 		})
 	)
 
-	const registerRef = useCallback((id: string, ref: HTMLLIElement | null) => {
-		linkRefs.current[id] = ref
-	}, [])
-
 	useKey("Escape", () => {
 		if (editId) {
 			setEditId(null)
 		}
 	})
 
+	// on mounted, if editId is set, set activeItemIndex to the index of the item with the editId
+	useEffect(() => {
+		if (editId) {
+			const index = sortedLinks.findIndex(link => link?.id === editId)
+			if (index !== -1) {
+				setActiveItemIndex(index)
+			}
+		}
+	}, [editId, sortedLinks, setActiveItemIndex])
+
 	const updateSequences = useCallback((links: PersonalLinkLists) => {
 		links.forEach((link, index) => {
 			if (link) {
@@ -87,57 +95,56 @@ const LinkList: React.FC<LinkListProps> = () => {
 
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
-			if (!me?.root?.personalLinks || sortedLinks.length === 0 || editId !== null) return
-
-			const currentIndex = sortedLinks.findIndex(link => link?.id === focusedId)
+			if (isCommandPalettePpen || !me?.root?.personalLinks || sortedLinks.length === 0 || editId !== null) return
 
 			if (e.key === "ArrowUp" || e.key === "ArrowDown") {
 				e.preventDefault()
-				const newIndex =
-					e.key === "ArrowUp" ? Math.max(0, currentIndex - 1) : Math.min(sortedLinks.length - 1, currentIndex + 1)
+				setActiveItemIndex(prevIndex => {
+					if (prevIndex === null) return 0
+					const newIndex =
+						e.key === "ArrowUp" ? Math.max(0, prevIndex - 1) : Math.min(sortedLinks.length - 1, prevIndex + 1)
 
-				if (e.metaKey && sort === "manual") {
-					const currentLink = me.root.personalLinks[currentIndex]
-					if (!currentLink) return
+					if (e.metaKey && sort === "manual") {
+						const linksArray = [...me.root.personalLinks]
+						const newLinks = arrayMove(linksArray, prevIndex, newIndex)
 
-					const linksArray = [...me.root.personalLinks]
-					const newLinks = arrayMove(linksArray, currentIndex, newIndex)
-
-					while (me.root.personalLinks.length > 0) {
-						me.root.personalLinks.pop()
-					}
-
-					newLinks.forEach(link => {
-						if (link) {
-							me.root.personalLinks.push(link)
+						while (me.root.personalLinks.length > 0) {
+							me.root.personalLinks.pop()
 						}
-					})
 
-					updateSequences(me.root.personalLinks)
-
-					const newFocusedLink = me.root.personalLinks[newIndex]
-					if (newFocusedLink) {
-						setFocusedId(newFocusedLink.id)
-
-						requestAnimationFrame(() => {
-							linkRefs.current[newFocusedLink.id]?.focus()
-						})
-					}
-				} else {
-					const newFocusedLink = sortedLinks[newIndex]
-					if (newFocusedLink) {
-						setFocusedId(newFocusedLink.id)
-						requestAnimationFrame(() => {
-							linkRefs.current[newFocusedLink.id]?.focus()
+						newLinks.forEach(link => {
+							if (link) {
+								me.root.personalLinks.push(link)
+							}
 						})
+
+						updateSequences(me.root.personalLinks)
 					}
+
+					return newIndex
+				})
+			} else if (e.key === "Enter" && activeItemIndex !== null) {
+				e.preventDefault()
+				const activeLink = sortedLinks[activeItemIndex]
+				if (activeLink) {
+					setEditId(activeLink.id)
 				}
 			}
 		}
 
 		window.addEventListener("keydown", handleKeyDown)
 		return () => window.removeEventListener("keydown", handleKeyDown)
-	}, [me?.root?.personalLinks, sortedLinks, focusedId, editId, sort, updateSequences])
+	}, [
+		me?.root?.personalLinks,
+		sortedLinks,
+		editId,
+		sort,
+		updateSequences,
+		isCommandPalettePpen,
+		activeItemIndex,
+		setEditId,
+		setActiveItemIndex
+	])
 
 	const handleDragStart = useCallback(
 		(event: DragStartEvent) => {
@@ -185,6 +192,7 @@ const LinkList: React.FC<LinkListProps> = () => {
 				})
 
 				updateSequences(me.root.personalLinks)
+				setActiveItemIndex(newIndex)
 			} catch (error) {
 				console.error("Error during link reordering:", error)
 			}
@@ -194,7 +202,10 @@ const LinkList: React.FC<LinkListProps> = () => {
 	}
 
 	return (
-		<div className="mb-14 flex w-full flex-1 flex-col overflow-y-auto [scrollbar-gutter:stable]">
+		<Primitive.div
+			className="mb-14 flex w-full flex-1 flex-col overflow-y-auto outline-none [scrollbar-gutter:stable]"
+			tabIndex={0}
+		>
 			<DndContext
 				sensors={sensors}
 				collisionDetection={closestCenter}
@@ -204,7 +215,7 @@ const LinkList: React.FC<LinkListProps> = () => {
 				<SortableContext items={sortedLinks.map(item => item?.id || "") || []} strategy={verticalListSortingStrategy}>
 					<ul role="list" className="divide-primary/5 divide-y">
 						{sortedLinks.map(
-							linkItem =>
+							(linkItem, index) =>
 								linkItem && (
 									<LinkItem
 										key={linkItem.id}
@@ -212,17 +223,17 @@ const LinkList: React.FC<LinkListProps> = () => {
 										setEditId={setEditId}
 										personalLink={linkItem}
 										disabled={sort !== "manual" || editId !== null}
-										registerRef={registerRef}
 										isDragging={draggingId === linkItem.id}
-										isFocused={focusedId === linkItem.id}
-										setFocusedId={setFocusedId}
+										isActive={activeItemIndex === index}
+										setActiveItemIndex={setActiveItemIndex}
+										index={index}
 									/>
 								)
 						)}
 					</ul>
 				</SortableContext>
 			</DndContext>
-		</div>
+		</Primitive.div>
 	)
 }
 

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

@@ -1,5 +1,3 @@
-"use client"
-
 import React, { useCallback, useMemo } from "react"
 import Image from "next/image"
 import Link from "next/link"
@@ -15,7 +13,7 @@ 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"
+import { linkOpenPopoverForIdAtom } from "@/store/link"
 
 interface LinkItemProps {
 	personalLink: PersonalLink
@@ -23,9 +21,9 @@ interface LinkItemProps {
 	isEditing: boolean
 	setEditId: (id: string | null) => void
 	isDragging: boolean
-	isFocused: boolean
-	setFocusedId: (id: string | null) => void
-	registerRef: (id: string, ref: HTMLLIElement | null) => void
+	isActive: boolean
+	setActiveItemIndex: (index: number | null) => void
+	index: number
 }
 
 export const LinkItem: React.FC<LinkItemProps> = ({
@@ -34,9 +32,9 @@ export const LinkItem: React.FC<LinkItemProps> = ({
 	personalLink,
 	disabled = false,
 	isDragging,
-	isFocused,
-	setFocusedId,
-	registerRef
+	isActive,
+	setActiveItemIndex,
+	index
 }) => {
 	const [openPopoverForId, setOpenPopoverForId] = useAtom(linkOpenPopoverForIdAtom)
 	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: personalLink.id, disabled })
@@ -50,14 +48,6 @@ export const LinkItem: React.FC<LinkItemProps> = ({
 		[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") {
@@ -92,90 +82,84 @@ export const LinkItem: React.FC<LinkItemProps> = ({
 
 	return (
 		<li
-			ref={refCallback}
+			ref={setNodeRef}
 			style={style as React.CSSProperties}
 			{...attributes}
 			{...listeners}
 			tabIndex={0}
-			onFocus={() => setFocusedId(personalLink.id)}
-			onBlur={() => setFocusedId(null)}
+			onFocus={() => setActiveItemIndex(index)}
+			onBlur={() => setActiveItemIndex(null)}
 			onKeyDown={handleKeyDown}
-			className={cn("relative flex h-14 cursor-default items-center outline-none xl:h-11", {
-				"bg-muted-foreground/10": isFocused,
-				"hover:bg-muted/50": !isFocused
-			})}
+			className={cn(
+				"relative cursor-default outline-none",
+				"grid grid-cols-[auto_1fr_auto] items-center gap-x-2 px-2 py-2 sm:px-4 sm:py-2",
+				{
+					"bg-muted-foreground/10": isActive,
+					"hover:bg-muted/50": !isActive
+				}
+			)}
 			onDoubleClick={handleRowDoubleClick}
 		>
-			<div className="flex grow justify-between gap-x-6 px-6 max-lg:px-4">
-				<div className="flex min-w-0 items-center gap-x-4">
-					<Popover
-						open={openPopoverForId === personalLink.id}
-						onOpenChange={(open: boolean) => setOpenPopoverForId(open ? personalLink.id : null)}
-					>
-						<PopoverTrigger asChild>
-							<Button size="sm" type="button" role="combobox" variant="secondary" className="size-7 shrink-0 p-0">
-								{selectedLearningState?.icon ? (
-									<LaIcon name={selectedLearningState.icon} className={cn(selectedLearningState.className)} />
-								) : (
-									<LaIcon name="Circle" />
-								)}
-							</Button>
-						</PopoverTrigger>
-						<PopoverContent
-							className="w-52 rounded-lg p-0"
-							side="bottom"
-							align="start"
-							onCloseAutoFocus={e => e.preventDefault()}
-						>
-							<LearningStateSelectorContent
-								showSearch={false}
-								searchPlaceholder="Search state..."
-								value={personalLink.learningState}
-								onSelect={handleLearningStateSelect}
-							/>
-						</PopoverContent>
-					</Popover>
+			<Popover
+				open={openPopoverForId === personalLink.id}
+				onOpenChange={(open: boolean) => setOpenPopoverForId(open ? personalLink.id : null)}
+			>
+				<PopoverTrigger asChild>
+					<Button size="sm" type="button" role="combobox" variant="secondary" className="size-7 shrink-0 p-0">
+						{selectedLearningState?.icon ? (
+							<LaIcon name={selectedLearningState.icon} className={cn(selectedLearningState.className)} />
+						) : (
+							<LaIcon name="Circle" />
+						)}
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent
+					className="w-52 rounded-lg p-0"
+					side="bottom"
+					align="start"
+					onCloseAutoFocus={e => e.preventDefault()}
+				>
+					<LearningStateSelectorContent
+						showSearch={false}
+						searchPlaceholder="Search state..."
+						value={personalLink.learningState}
+						onSelect={handleLearningStateSelect}
+					/>
+				</PopoverContent>
+			</Popover>
 
-					{personalLink.icon && (
-						<Image
-							src={personalLink.icon}
-							alt={personalLink.title}
-							className="size-5 rounded-full"
-							width={16}
-							height={16}
-						/>
-					)}
-					<div className="w-full min-w-0 flex-auto">
-						<div className="gap-x-2 space-y-0.5 xl:flex xl:flex-row">
-							<p className="text-primary hover:text-primary line-clamp-1 text-sm font-medium xl:truncate">
-								{personalLink.title}
-							</p>
-							{personalLink.url && (
-								<div className="group flex items-center gap-x-1">
-									<LaIcon
-										name="Link"
-										aria-hidden="true"
-										className="text-muted-foreground group-hover:text-primary flex-none"
-									/>
-									<Link
-										href={personalLink.url}
-										passHref
-										prefetch={false}
-										target="_blank"
-										onClick={e => e.stopPropagation()}
-										className="text-muted-foreground hover:text-primary text-xs"
-									>
-										<span className="xl:truncate">{personalLink.url}</span>
-									</Link>
-								</div>
-							)}
+			<div className="flex min-w-0 flex-col items-start gap-y-1 overflow-hidden md:flex-row md:items-center md:gap-x-2">
+				{personalLink.icon && (
+					<Image
+						src={personalLink.icon}
+						alt={personalLink.title}
+						className="size-5 shrink-0 rounded-full"
+						width={16}
+						height={16}
+					/>
+				)}
+				<div className="flex min-w-0 flex-col items-start gap-y-1 overflow-hidden md:flex-row md:items-center md:gap-x-2">
+					<p className="text-primary hover:text-primary truncate text-sm font-medium">{personalLink.title}</p>
+					{personalLink.url && (
+						<div className="text-muted-foreground flex min-w-0 shrink items-center gap-x-1">
+							<LaIcon name="Link" aria-hidden="true" className="size-3 flex-none" />
+							<Link
+								href={personalLink.url}
+								passHref
+								prefetch={false}
+								target="_blank"
+								onClick={e => e.stopPropagation()}
+								className="hover:text-primary truncate text-xs"
+							>
+								{personalLink.url}
+							</Link>
 						</div>
-					</div>
+					)}
 				</div>
+			</div>
 
-				<div className="flex shrink-0 items-center gap-x-4">
-					{personalLink.topic && <Badge variant="secondary">{personalLink.topic.prettyName}</Badge>}
-				</div>
+			<div className="flex shrink-0 items-center justify-end">
+				{personalLink.topic && <Badge variant="secondary">{personalLink.topic.prettyName}</Badge>}
 			</div>
 		</li>
 	)