fix(topic): Topic list keybind (#181)

* fix(page): improve keybind

* fix(topic): improve keybind

* fix: learning state selector

web/components/routes/topics/list.tsx

@@ -1,8 +1,7 @@
-import React, { useCallback, useEffect, useMemo } from "react"
+import * as React from "react"
 import { Primitive } from "@radix-ui/react-primitive"
 import { useAccount } from "@/lib/providers/jazz-provider"
-import { atom, useAtom } from "jotai"
-import { commandPaletteOpenAtom } from "@/components/custom/command-palette/command-palette"
+import { atom } from "jotai"
 import { TopicItem } from "./partials/topic-item"
 import { useMedia } from "@/hooks/use-media"
 import { useRouter } from "next/navigation"
@@ -11,12 +10,9 @@ import { Column } from "@/components/custom/column"
 import { useColumnStyles } from "./hooks/use-column-styles"
 import { LaAccount, ListOfTopics, Topic, UserRoot } from "@/lib/schema"
 import { LearningStateValue } from "@/lib/constants"
+import { useKeyDown } from "@/hooks/use-key-down"
 
-interface TopicListProps {
-	activeItemIndex: number | null
-	setActiveItemIndex: React.Dispatch<React.SetStateAction<number | null>>
-	disableEnterKey: boolean
-}
+interface TopicListProps {}
 
 interface MainTopicListProps extends TopicListProps {
 	me: {
@@ -35,32 +31,21 @@ export interface PersonalTopic {
 
 export const topicOpenPopoverForIdAtom = atom<string | null>(null)
 
-export const TopicList: React.FC<TopicListProps> = ({ activeItemIndex, setActiveItemIndex, disableEnterKey }) => {
+export const TopicList: React.FC<TopicListProps> = () => {
 	const { me } = useAccount({ root: { topicsWantToLearn: [], topicsLearning: [], topicsLearned: [] } })
 
 	if (!me) return null
 
-	return (
-		<MainTopicList
-			me={me}
-			activeItemIndex={activeItemIndex}
-			setActiveItemIndex={setActiveItemIndex}
-			disableEnterKey={disableEnterKey}
-		/>
-	)
+	return <MainTopicList me={me} />
 }
 
-export const MainTopicList: React.FC<MainTopicListProps> = ({
-	me,
-	activeItemIndex,
-	setActiveItemIndex,
-	disableEnterKey
-}) => {
+export const MainTopicList: React.FC<MainTopicListProps> = ({ me }) => {
 	const isTablet = useMedia("(max-width: 640px)")
-	const [isCommandPaletteOpen] = useAtom(commandPaletteOpenAtom)
+	const [activeItemIndex, setActiveItemIndex] = React.useState<number | null>(null)
+	const [keyboardActiveIndex, setKeyboardActiveIndex] = React.useState<number | null>(null)
 	const router = useRouter()
 
-	const personalTopics = useMemo(
+	const personalTopics = React.useMemo(
 		() => [
 			...me.root.topicsWantToLearn.map(topic => ({ topic, learningState: "wantToLearn" as const })),
 			...me.root.topicsLearning.map(topic => ({ topic, learningState: "learning" as const })),
@@ -69,44 +54,63 @@ export const MainTopicList: React.FC<MainTopicListProps> = ({
 		[me.root.topicsWantToLearn, me.root.topicsLearning, me.root.topicsLearned]
 	)
 
-	const itemCount = personalTopics.length
-
-	const handleEnter = useCallback(
+	const handleEnter = React.useCallback(
 		(selectedTopic: Topic) => {
 			router.push(`/${selectedTopic.name}`)
 		},
 		[router]
 	)
 
-	const handleKeyDown = useCallback(
-		(e: KeyboardEvent) => {
-			if (isCommandPaletteOpen) return
+	const next = () => Math.min((activeItemIndex ?? 0) + 1, (personalTopics?.length ?? 0) - 1)
 
-			if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-				e.preventDefault()
-				setActiveItemIndex(prevIndex => {
-					if (prevIndex === null) return 0
-					const newIndex = e.key === "ArrowUp" ? (prevIndex - 1 + itemCount) % itemCount : (prevIndex + 1) % itemCount
-					return newIndex
-				})
-			} else if (e.key === "Enter" && !disableEnterKey && activeItemIndex !== null && personalTopics) {
-				e.preventDefault()
-				const selectedTopic = personalTopics[activeItemIndex]
-				if (selectedTopic?.topic) handleEnter?.(selectedTopic.topic)
-			}
-		},
-		[itemCount, isCommandPaletteOpen, activeItemIndex, setActiveItemIndex, disableEnterKey, personalTopics, handleEnter]
-	)
+	const prev = () => Math.max((activeItemIndex ?? 0) - 1, 0)
 
-	useEffect(() => {
-		window.addEventListener("keydown", handleKeyDown)
-		return () => window.removeEventListener("keydown", handleKeyDown)
-	}, [handleKeyDown])
+	const handleKeyDown = (ev: KeyboardEvent) => {
+		switch (ev.key) {
+			case "ArrowDown":
+				ev.preventDefault()
+				ev.stopPropagation()
+				setActiveItemIndex(next())
+				setKeyboardActiveIndex(next())
+				break
+			case "ArrowUp":
+				ev.preventDefault()
+				ev.stopPropagation()
+				setActiveItemIndex(prev())
+				setKeyboardActiveIndex(prev())
+		}
+	}
+
+	useKeyDown(() => true, handleKeyDown)
+
+	const { setElementRef } = useActiveItemScroll<HTMLAnchorElement>({ activeIndex: keyboardActiveIndex })
 
 	return (
 		<div className="flex h-full w-full flex-col overflow-hidden border-t">
 			{!isTablet && <ColumnHeader />}
-			<TopicListItems personalTopics={personalTopics} activeItemIndex={activeItemIndex} />
+			<Primitive.div
+				className="divide-primary/5 flex flex-1 flex-col divide-y overflow-y-auto outline-none [scrollbar-gutter:stable]"
+				tabIndex={-1}
+				role="list"
+			>
+				{personalTopics?.map(
+					(pt, index) =>
+						pt.topic?.id && (
+							<TopicItem
+								key={pt.topic.id}
+								ref={el => setElementRef(el, index)}
+								topic={pt.topic}
+								learningState={pt.learningState}
+								isActive={index === activeItemIndex}
+								onPointerMove={() => {
+									setKeyboardActiveIndex(null)
+									setActiveItemIndex(index)
+								}}
+								data-keyboard-active={keyboardActiveIndex === index}
+							/>
+						)
+				)}
+			</Primitive.div>
 		</div>
 	)
 }
@@ -125,33 +129,3 @@ export const ColumnHeader: React.FC = () => {
 		</div>
 	)
 }
-
-interface TopicListItemsProps {
-	personalTopics: PersonalTopic[] | null
-	activeItemIndex: number | null
-}
-
-const TopicListItems: React.FC<TopicListItemsProps> = ({ personalTopics, activeItemIndex }) => {
-	const { setElementRef } = useActiveItemScroll<HTMLDivElement>({ activeIndex: activeItemIndex })
-
-	return (
-		<Primitive.div
-			className="divide-primary/5 flex flex-1 flex-col divide-y overflow-y-auto outline-none [scrollbar-gutter:stable]"
-			tabIndex={-1}
-			role="list"
-		>
-			{personalTopics?.map(
-				(pt, index) =>
-					pt.topic?.id && (
-						<TopicItem
-							key={pt.topic.id}
-							ref={el => setElementRef(el, index)}
-							topic={pt.topic}
-							learningState={pt.learningState}
-							isActive={index === activeItemIndex}
-						/>
-					)
-			)}
-		</Primitive.div>
-	)
-}