feat: implement dynamic routing for event kinds and add KindPageClient component

Author: gsovereignty

src/app/[kind]/KindPageClient.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { Sidebar } from '@/components/Sidebar'
+import { MainContent } from '@/components/MainContent'
+import { SearchBar } from '@/components/SearchBar'
+import { ThemeToggle } from '@/components/ThemeToggle'
+
+interface KindPageClientProps {
+  kindNum: number
+}
+
+export function KindPageClient({ kindNum }: KindPageClientProps) {
+  const router = useRouter()
+  const [searchQuery, setSearchQuery] = useState('')
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+
+  return (
+    <div className="flex h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden">
+      {/* Mobile sidebar overlay */}
+      {sidebarOpen && (
+        <div 
+          className="fixed inset-0 z-40 bg-black bg-opacity-25 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+      
+      {/* Sidebar */}
+      <div className={`
+        flex flex-col w-80 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700
+        lg:relative lg:translate-x-0
+        fixed inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out
+        ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
+      `}>
+        <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+          <div className="flex items-center justify-between mb-3">
+            <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">
+              Nostr Event Kinds
+            </h1>
+            <div className="flex items-center gap-2">
+              <div className="hidden lg:block">
+                <ThemeToggle />
+              </div>
+              <button
+                className="lg:hidden p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
+                onClick={() => setSidebarOpen(false)}
+              >
+                <span className="text-gray-500 dark:text-gray-400">✕</span>
+              </button>
+            </div>
+          </div>
+          <SearchBar 
+            searchQuery={searchQuery} 
+            onSearchChange={setSearchQuery} 
+          />
+        </div>
+        <Sidebar 
+          selectedKind={kindNum}
+          onKindSelect={(kind) => {
+            // Navigate to the new kind URL
+            router.push(`/${kind}`)
+            setSidebarOpen(false)
+          }}
+          searchQuery={searchQuery}
+        />
+      </div>
+      
+      {/* Main content */}
+      <div className="flex-1 flex flex-col lg:ml-0">
+        {/* Mobile header */}
+        <div className="lg:hidden flex items-center justify-between p-4 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
+          >
+            <span className="text-gray-700 dark:text-gray-300">☰</span>
+          </button>
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            Kind {kindNum}
+          </h2>
+          <div className="block lg:hidden">
+            <ThemeToggle />
+          </div>
+        </div>
+        
+        <MainContent selectedKind={kindNum} />
+      </div>
+    </div>
+  )
+}

src/app/[kind]/page.tsx

@@ -0,0 +1,47 @@
+import { notFound } from 'next/navigation'
+import { eventKinds } from '@/data/eventKinds'
+import { KindPageClient } from './KindPageClient'
+
+interface KindPageProps {
+  params: Promise<{
+    kind: string
+  }>
+}
+
+export async function generateStaticParams() {
+  // Generate static pages for all known event kinds
+  return eventKinds.map((eventKind) => ({
+    kind: eventKind.kind.toString(),
+  }))
+}
+
+export async function generateMetadata({ params }: KindPageProps) {
+  const resolvedParams = await params
+  const kindNum = parseInt(resolvedParams.kind)
+  const eventKind = eventKinds.find(kind => kind.kind === kindNum)
+  
+  if (!eventKind) {
+    return {
+      title: 'Event Kind Not Found - Nostr Event Kinds Reference',
+      description: 'The requested event kind was not found',
+    }
+  }
+
+  return {
+    title: `Kind ${kindNum}: ${eventKind.name} - Nostr Event Kinds Reference`,
+    description: eventKind.description,
+  }
+}
+
+export default async function KindPage({ params }: KindPageProps) {
+  const resolvedParams = await params
+  const kindNum = parseInt(resolvedParams.kind)
+
+  // Validate that the kind exists
+  const eventKind = eventKinds.find(kind => kind.kind === kindNum)
+  if (!eventKind || isNaN(kindNum)) {
+    notFound()
+  }
+
+  return <KindPageClient kindNum={kindNum} />
+}

src/app/page.tsx

@@ -1,12 +1,14 @@
 'use client'
 
 import { useState } from 'react'
+import { useRouter } from 'next/navigation'
 import { Sidebar } from '@/components/Sidebar'
 import { MainContent } from '@/components/MainContent'
 import { SearchBar } from '@/components/SearchBar'
 import { ThemeToggle } from '@/components/ThemeToggle'
 
 export default function Home() {
+  const router = useRouter()
   const [selectedKind, setSelectedKind] = useState<number | null>(null)
   const [searchQuery, setSearchQuery] = useState('')
   const [sidebarOpen, setSidebarOpen] = useState(false)
@@ -53,7 +55,8 @@ export default function Home() {
         <Sidebar 
           selectedKind={selectedKind}
           onKindSelect={(kind) => {
-            setSelectedKind(kind)
+            // Navigate to the specific kind URL
+            router.push(`/${kind}`)
             setSidebarOpen(false) // Close sidebar on mobile after selection
           }}
           searchQuery={searchQuery}