feat(landing): topic search (#134)

* feat(landing): topic search

* fix: node click

web/app/(pages)/layout.tsx

@@ -1,6 +1,6 @@
 import { SignedInClient } from "@/components/custom/clerk/signed-in-client"
 import { Sidebar } from "@/components/custom/sidebar/sidebar"
-import { PublicHomeRoute } from "@/components/routes/PublicHomeRoute"
+import { PublicHomeRoute } from "@/components/routes/public/PublicHomeRoute"
 import { CommandPalette } from "@/components/ui/CommandPalette"
 import { JazzClerkAuth, JazzProvider } from "@/lib/providers/jazz-provider"
 import { currentUser } from "@clerk/nextjs/server"

web/components/routes/PublicHomeRoute.tsx

@@ -1,70 +0,0 @@
-"use client"
-import * as react from "react"
-import { useCoState } from "@/lib/providers/jazz-provider"
-import { PublicGlobalGroup } from "@/lib/schema/master/public-group"
-import dynamic from "next/dynamic"
-import Link from "next/link"
-import { JAZZ_GLOBAL_GROUP_ID } from "@/lib/constants"
-
-let graph_data_promise = import("./graph-data.json").then(a => a.default)
-const ForceGraphClient = dynamic(() => import("./force-graph-client-lazy"), { ssr: false })
-
-export function PublicHomeRoute() {
-	let raw_graph_data = react.use(graph_data_promise)
-
-	const [placeholder, setPlaceholder] = react.useState("Search something...")
-	const [currentTopicIndex, setCurrentTopicIndex] = react.useState(0)
-	const [currentCharIndex, setCurrentCharIndex] = react.useState(0)
-	const globalGroup = useCoState(PublicGlobalGroup, JAZZ_GLOBAL_GROUP_ID, {
-		root: {
-			topics: []
-		}
-	})
-	const topics = globalGroup?.root.topics?.map(topic => topic?.prettyName) || []
-
-	react.useEffect(() => {
-		if (topics.length === 0) return
-
-		const typingInterval = setInterval(() => {
-			const currentTopic = topics[currentTopicIndex]
-			if (currentTopic && currentCharIndex < currentTopic.length) {
-				setPlaceholder(`${currentTopic.slice(0, currentCharIndex + 1)}`)
-				setCurrentCharIndex(currentCharIndex + 1)
-			} else {
-				clearInterval(typingInterval)
-				setTimeout(() => {
-					setCurrentTopicIndex(prevIndex => (prevIndex + 1) % topics.length)
-					setCurrentCharIndex(0)
-				}, 1000)
-			}
-		}, 200)
-
-		return () => clearInterval(typingInterval)
-	}, [currentTopicIndex, currentCharIndex, topics])
-
-	return (
-		<div className="relative h-full w-screen">
-			<ForceGraphClient
-				raw_nodes={raw_graph_data}
-				onNodeClick={val => {
-					console.log("clicked", val)
-				}}
-				filter_query=""
-			/>
-			<div className="absolute left-0 top-0 z-20 p-4">
-				<h2 className="text-xl font-bold text-black dark:text-white">Learn Anything</h2>
-				<Link href={"/1password"}>Random Topic</Link>
-			</div>
-			<div className="absolute left-1/2 top-1/2 z-10 w-[60%] -translate-x-1/2 -translate-y-1/2 transform">
-				<div className="flex flex-col items-center justify-center gap-6">
-					<h1 className="text-center text-5xl font-bold uppercase text-black dark:text-white">i want to learn</h1>
-					<input
-						type="text"
-						placeholder={placeholder}
-						className="bg-result w-[70%] rounded-md border px-6 py-3 text-lg shadow-lg placeholder:text-black/40 focus:outline-none active:outline-none dark:placeholder:text-white/40"
-					/>
-				</div>
-			</div>
-		</div>
-	)
-}

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

web/components/routes/public/PublicHomeRoute.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import dynamic from "next/dynamic"
+import { motion } from "framer-motion"
+import { Autocomplete } from "./Autocomplete"
+import { useRouter } from "next/navigation"
+
+let graph_data_promise = import("./graph-data.json").then(a => a.default)
+
+const ForceGraphClient = dynamic(() => import("./force-graph-client-lazy"), { ssr: false })
+
+interface GraphNode {
+	name: string
+	prettyName: string
+	connectedTopics: string[]
+}
+
+export function PublicHomeRoute() {
+	const router = useRouter()
+	const raw_graph_data = React.use(graph_data_promise) as GraphNode[]
+	const [filterQuery, setFilterQuery] = React.useState<string>("")
+
+	const handleTopicSelect = (topicName: string) => {
+		router.push(`/${topicName}`)
+	}
+
+	const handleInputChange = (value: string) => {
+		setFilterQuery(value)
+	}
+
+	return (
+		<div className="relative h-full w-screen">
+			<ForceGraphClient
+				raw_nodes={raw_graph_data}
+				onNodeClick={val => handleTopicSelect(val)}
+				filter_query={filterQuery}
+			/>
+
+			<motion.div
+				className="absolute left-1/2 top-1/2 w-full max-w-md -translate-x-1/2 -translate-y-1/2 transform max-sm:px-5"
+				initial={{ opacity: 0, y: 20 }}
+				animate={{ opacity: 1, y: 0 }}
+				transition={{ duration: 0.5 }}
+				style={{ x: "-50%", y: "-50%" }}
+			>
+				<motion.h1
+					className="mb-2 text-center text-3xl font-bold uppercase sm:mb-4 md:text-5xl"
+					initial={{ opacity: 0, y: -20 }}
+					animate={{ opacity: 1, y: 0 }}
+					transition={{ duration: 0.5, delay: 0.2 }}
+				>
+					I want to learn
+				</motion.h1>
+				<Autocomplete
+					topics={raw_graph_data}
+					onSelect={topic => handleTopicSelect(topic.name)}
+					onInputChange={handleInputChange}
+				/>
+			</motion.div>
+		</div>
+	)
+}
+
+export default PublicHomeRoute

web/package.json

@@ -9,7 +9,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@clerk/nextjs": "^5.4.0",
+    "@clerk/nextjs": "^5.4.1",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@hookform/resolvers": "^3.9.0",
@@ -32,7 +32,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@tanstack/react-virtual": "^3.10.6",
+    "@tanstack/react-virtual": "^3.10.7",
     "@tiptap/core": "^2.6.6",
     "@tiptap/extension-blockquote": "^2.6.6",
     "@tiptap/extension-bold": "^2.6.6",
@@ -67,7 +67,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",
-    "framer-motion": "^11.4.0",
+    "framer-motion": "^11.5.2",
     "jazz-react": "0.7.35-unique.2",
     "jazz-react-auth-clerk": "0.7.33-new-auth.1",
     "jazz-tools": "0.7.35-unique.2",
@@ -96,14 +96,14 @@
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@types/jest": "^29.5.12",
-    "@types/node": "^22.5.2",
+    "@types/node": "^22.5.3",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "eslint": "^8.57.0",
     "eslint-config-next": "14.2.5",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "postcss": "^8.4.44",
+    "postcss": "^8.4.45",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "tailwindcss": "^3.4.10",
     "ts-jest": "^29.2.5",