feat(landing): topic search (#134)

* feat(landing): topic search * fix: node click
2026-01-12 12:20:23 +01:00 · 2024-09-05 04:17:12 +07:00
parent 01e8f4882f
commit c8c0c86c96
8 changed files with 194 additions and 76 deletions
--- a/web/components/routes/public/Autocomplete.tsx
+++ b/web/components/routes/public/Autocomplete.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import React, { useState, useRef, useCallback, useMemo } from "react"
+import { Command, CommandGroup, CommandItem, CommandList } from "@/components/ui/command"
+import { Command as CommandPrimitive } from "cmdk"
+import { motion, AnimatePresence } from "framer-motion"
+import { cn } from "@/lib/utils"
+
+interface GraphNode {
+	name: string
+	prettyName: string
+	connectedTopics: string[]
+}
+
+interface AutocompleteProps {
+	topics: GraphNode[]
+	onSelect: (topic: GraphNode) => void
+	onInputChange: (value: string) => void
+}
+
+export function Autocomplete({ topics = [], onSelect, onInputChange }: AutocompleteProps): JSX.Element {
+	const inputRef = useRef<HTMLInputElement>(null)
+	const [open, setOpen] = useState(false)
+	const [inputValue, setInputValue] = useState("")
+
+	const filteredTopics = useMemo(() => {
+		if (!inputValue) {
+			return topics.slice(0, 5)
+		}
+		const regex = new RegExp(inputValue.split("").join(".*"), "i")
+		return topics.filter(
+			topic =>
+				regex.test(topic.name) ||
+				regex.test(topic.prettyName) ||
+				topic.connectedTopics.some(connectedTopic => regex.test(connectedTopic))
+		)
+	}, [inputValue, topics])
+
+	const handleSelect = useCallback(
+		(topic: GraphNode) => {
+			setInputValue(topic.prettyName)
+			setOpen(false)
+			onSelect(topic)
+		},
+		[onSelect]
+	)
+
+	const handleKeyDown = useCallback(
+		(e: React.KeyboardEvent<HTMLDivElement>) => {
+			if (e.key === "Enter" && filteredTopics.length > 0) {
+				handleSelect(filteredTopics[0])
+			} else if ((e.key === "Backspace" || e.key === "Delete") && inputRef.current?.value === "") {
+				setOpen(true)
+			}
+		},
+		[filteredTopics, handleSelect]
+	)
+
+	const handleInputChange = useCallback(
+		(value: string) => {
+			setInputValue(value)
+			setOpen(true)
+			onInputChange(value)
+		},
+		[onInputChange]
+	)
+
+	return (
+		<Command
+			className={cn("bg-background relative overflow-visible", {
+				"rounded-lg border": !open,
+				"rounded-none rounded-t-lg border-l border-r border-t": open
+			})}
+			onKeyDown={handleKeyDown}
+		>
+			<div className="flex items-center p-2">
+				<CommandPrimitive.Input
+					ref={inputRef}
+					value={inputValue}
+					onValueChange={handleInputChange}
+					onBlur={() => setTimeout(() => setOpen(false), 100)}
+					onFocus={() => setOpen(true)}
+					placeholder="Search for a topic..."
+					className={cn("placeholder:text-muted-foreground flex-1 bg-transparent px-2 py-1 outline-none", {
+						"mb-1 border-b pb-2.5": open
+					})}
+				/>
+			</div>
+			<div className="relative">
+				<AnimatePresence>
+					{open && (
+						<motion.div
+							initial={{ opacity: 0, y: -10 }}
+							animate={{ opacity: 1, y: 0 }}
+							exit={{ opacity: 0, y: -10 }}
+							transition={{ duration: 0.1 }}
+							className="bg-background absolute left-0 right-0 z-10 -mx-px rounded-b-lg border-b border-l border-r shadow-lg"
+						>
+							<CommandList className="max-h-52">
+								<CommandGroup className="mb-2">
+									{filteredTopics.map(topic => (
+										<CommandItem
+											key={topic.name}
+											onSelect={() => handleSelect(topic)}
+											className="min-h-10 rounded-none px-3 py-1.5"
+										>
+											<span>{topic.prettyName}</span>
+											<span className="text-muted-foreground ml-auto text-xs">
+												{topic.connectedTopics.length > 0 ? topic.connectedTopics.join(", ") : "-"}
+											</span>
+										</CommandItem>
+									))}
+								</CommandGroup>
+							</CommandList>
+						</motion.div>
+					)}
+				</AnimatePresence>
+			</div>
+		</Command>
+	)
+}
+
+export default Autocomplete