feat(topic): Topic List Route (#172)

* feat: add item scroll to active

* fix: reset enterkey and scroll to view

* fix: link item displayName

* refactor: remove keyboard page nav

* chore: fix scrolling, perf, keys, highlight active item etc

* chore: use new hook for create a page

* chore: disabled auto delete page

* wip

* chore: add learning selector

* chore: learning selector update

web/components/routes/topics/header.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { ContentHeader, SidebarToggleButton } from "@/components/custom/content-header"
+import { useAccount } from "@/lib/providers/jazz-provider"
+
+interface TopicHeaderProps {}
+
+export const TopicHeader: React.FC<TopicHeaderProps> = React.memo(() => {
+	const { me } = useAccount()
+
+	if (!me) return null
+
+	return (
+		<ContentHeader className="px-6 py-4 max-lg:px-4">
+			<HeaderTitle />
+			<div className="flex flex-auto" />
+		</ContentHeader>
+	)
+})
+
+TopicHeader.displayName = "TopicHeader"
+
+const HeaderTitle: React.FC = () => (
+	<div className="flex min-w-0 shrink-0 items-center gap-1.5">
+		<SidebarToggleButton />
+		<div className="flex min-h-0 items-center">
+			<span className="truncate text-left font-bold lg:text-xl">Topics</span>
+		</div>
+	</div>
+)