/ route for force graph, /links for links

web/app/(pages)/layout.tsx

@@ -1,6 +1,5 @@
 import { SignedInClient } from "@/components/custom/clerk/signed-in-client"
 import { Sidebar } from "@/components/custom/sidebar/sidebar"
-import { PublicHomeRoute } from "@/components/routes/public/PublicHomeRoute"
 import { JazzClerkAuth, JazzProvider } from "@/lib/providers/jazz-provider"
 import { currentUser } from "@clerk/nextjs/server"
 import { CommandPalette } from "@/components/custom/command-palette/command-palette"
@@ -9,7 +8,7 @@ export default async function PageLayout({ children }: { children: React.ReactNo
 	const user = await currentUser()
 
 	if (!user) {
-		return <PublicHomeRoute />
+		return children
 	}
 
 	return (

web/app/(pages)/links/page.tsx

@@ -1,5 +1,5 @@
 import { LinkRoute } from "@/components/routes/link/LinkRoute"
 
-export default function HomePage() {
+export default function LinksPage() {
 	return <LinkRoute />
 }

web/app/(public)/layout.tsx

@@ -0,0 +1,7 @@
+export default function PublicLayout({
+	children
+}: Readonly<{
+	children: React.ReactNode
+}>) {
+	return <main className="h-full">{children}</main>
+}

web/app/page.tsx

@@ -0,0 +1,5 @@
+import { PublicHomeRoute } from "@/components/routes/public/PublicHomeRoute"
+
+export default function HomePage() {
+	return <PublicHomeRoute />
+}

web/components/custom/sidebar/partial/link-section.tsx

@@ -14,7 +14,7 @@ export const LinkSection: React.FC<{ pathname: string }> = ({ pathname }) => {
 	})
 
 	const linkCount = me?.root.personalLinks?.length || 0
-	const isActive = pathname === "/"
+	const isActive = pathname === "/links"
 
 	if (!me) return null
 
@@ -39,7 +39,7 @@ const LinkSectionHeader: React.FC<LinkSectionHeaderProps> = ({ linkCount, isActi
 		)}
 	>
 		<Link
-			href="/"
+			href="/links"
 			className={cn(
 				"size-6 flex-1 items-center justify-start rounded-md px-2 py-1",
 				"focus-visible:outline-none focus-visible:ring-0",
@@ -78,7 +78,7 @@ interface ListItemProps {
 const ListItem: React.FC<ListItemProps> = ({ label, href, count, isActive }) => {
 	return (
 		<div className="group/reorder-page relative">
-			<div className="group/topic-link relative flex min-w-0 flex-1">
+			{/* <div className="group/topic-link relative flex min-w-0 flex-1">
 				<Link
 					href={href}
 					className={cn(
@@ -94,7 +94,7 @@ const ListItem: React.FC<ListItemProps> = ({ label, href, count, isActive }) =>
 				{count > 0 && (
 					<span className="absolute right-2 top-1/2 z-[1] -translate-y-1/2 rounded p-1 text-sm">{count}</span>
 				)}
-			</div>
+			</div> */}
 		</div>
 	)
 }

web/components/custom/sidebar/sidebar.tsx

@@ -78,7 +78,7 @@ const LogoAndSearch: React.FC = React.memo(() => {
 	return (
 		<div className="px-3">
 			<div className="mt-2 flex h-10 max-w-full items-center">
-				<Link href="/explore" className="px-2">
+				<Link href="/" className="px-2">
 					<Logo className="size-7" />
 				</Link>
 				<div className="flex min-w-2 grow flex-row" />

web/components/routes/public/PublicHomeRoute.tsx

@@ -5,6 +5,7 @@ import dynamic from "next/dynamic"
 import { motion } from "framer-motion"
 import { Autocomplete } from "./Autocomplete"
 import { useRouter } from "next/navigation"
+import { useAccount } from "@/lib/providers/jazz-provider"
 
 let graph_data_promise = import("./graph-data.json").then(a => a.default)
 
@@ -20,6 +21,7 @@ export function PublicHomeRoute() {
 	const router = useRouter()
 	const raw_graph_data = React.use(graph_data_promise) as GraphNode[]
 	const [filterQuery, setFilterQuery] = React.useState<string>("")
+	const { me } = useAccount()
 
 	const handleTopicSelect = (topicName: string) => {
 		router.push(`/${topicName}`)
@@ -30,35 +32,37 @@ export function PublicHomeRoute() {
 	}
 
 	return (
-		<div className="relative h-full w-screen">
+		<>
-			<ForceGraphClient
+			<div className="relative h-full w-screen">
-				raw_nodes={raw_graph_data}
+				<ForceGraphClient
-				onNodeClick={val => handleTopicSelect(val)}
+					raw_nodes={raw_graph_data}
-				filter_query={filterQuery}
+					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>
+				<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>
+		</>
 	)
 }
 

web/middleware.ts

@@ -1,6 +1,7 @@
 import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server"
 
-const isPublicRoute = createRouteMatcher(["/sign-in(.*)", "/sign-up(.*)", "/"])
+const publicRoutes = ["/", "/sign-in(.*)", "/sign-up(.*)"]
+const isPublicRoute = createRouteMatcher(publicRoutes)
 
 export default clerkMiddleware((auth, request) => {
 	if (!isPublicRoute(request)) {