feat: ssr and layout improvements on u and b routes

apps/masterbots.ai/app/(browse)/[category]/[threadId]/page.tsx

@@ -1,17 +1,22 @@
-import { getMessagePairs, getThread } from '@/services/hasura'
+import { getCategories, getMessagePairs, getThread } from '@/services/hasura'
 
 import type { ChatPageProps } from '@/app/c/[chatbot]/[threadId]/page'
 import Shortlink from '@/components/routes/browse/shortlink-button'
 import { ThreadAccordion } from '@/components/shared/thread-accordion'
+import { BrowseCategoryTabs } from '@/components/routes/browse/browse-category-tabs'
+import { BrowseSearchInput } from '@/components/routes/browse/browse-search-input'
 
 export default async function ThreadLandingPage({ params }: ChatPageProps) {
+  const categories = await getCategories()
   const thread = await getThread({
     threadId: params.threadId
   })
   const initialMessagePairs = await getMessagePairs(thread.threadId)
 
   return (
     <div className="container">
+      <BrowseCategoryTabs categories={categories} />
+      <BrowseSearchInput />
       <Shortlink />
       <ThreadAccordion
         thread={thread}

apps/masterbots.ai/app/(browse)/[category]/page.tsx

@@ -24,13 +24,13 @@ export default async function BrowseCategoryPage({
   })
 
   return (
-    <div className="w-full max-w-screen-lg pb-10 mx-auto">
+    <div className="w-full container pb-10 mx-auto">
       <BrowseCategoryTabs
         categories={categories}
         initialCategory={params.category}
       />
       <BrowseSearchInput />
-      <ThreadList initialThreads={threads} />
+      <ThreadList initialThreads={threads} filter={{ categoryId }} />
     </div>
   )
 }

apps/masterbots.ai/app/(browse)/page.tsx

@@ -8,12 +8,11 @@ export default async function BrowsePage() {
   const threads = await getBrowseThreads({
     limit: 50
   })
-
   return (
-    <div className="w-full max-w-screen-lg px-4 pb-10 mx-auto">
+    <div className="w-full container px-4 pb-10 mx-auto">
       <BrowseCategoryTabs categories={categories} />
       <BrowseSearchInput />
-      <ThreadList initialThreads={threads} />
+      <ThreadList initialThreads={threads} filter={{}} />
     </div>
   )
 }

apps/masterbots.ai/app/b/[id]/page.tsx

@@ -16,9 +16,9 @@ export default async function BotThreadsPage({
     threads: true
   })
   if (!chatbot) throw new Error(`Chatbot ${botNames.get(params.id)} not found`)
-
+  const chatbotName = botNames.get(params.id)
   threads = await getBrowseThreads({
-    chatbotName: botNames.get(params.id),
+    chatbotName,
     limit: 50
   })
 
@@ -33,7 +33,7 @@ export default async function BotThreadsPage({
         threadNum={threads.length}
       />
       <div className="container">
-        <ThreadList initialThreads={threads} />
+        <ThreadList initialThreads={threads} filter={{ chatbotName }} />
       </div>
     </div>
   )

apps/masterbots.ai/app/u/[slug]/page.tsx

@@ -23,7 +23,7 @@ export default async function BotThreadsPage({
         threadNum={threads.length} //TODO: get total number of thread. not the filter one
       />
       <div className="container">
-        <ThreadList initialThreads={threads} />
+        <ThreadList initialThreads={threads} filter={{ slug: params.slug }} />
       </div>
     </div>
   )

apps/masterbots.ai/components/shared/thread-list.tsx

@@ -7,8 +7,11 @@ import { useBrowse } from '@/hooks/use-browse'
 import { getBrowseThreads } from '@/services/hasura'
 import { ThreadDialog } from './thread-dialog'
 
-export default function ThreadList({ initialThreads }: ThreadListProps) {
-  const { keyword, tab } = useBrowse()
+export default function ThreadList({
+  initialThreads,
+  filter
+}: ThreadListProps) {
+  const { keyword } = useBrowse()
   const [threads, setThreads] = useState<Thread[]>(initialThreads)
   const [filteredThreads, setFilteredThreads] =
     useState<Thread[]>(initialThreads)
@@ -22,7 +25,7 @@ export default function ThreadList({ initialThreads }: ThreadListProps) {
     setLoading(true)
 
     const moreThreads = await getBrowseThreads({
-      categoryId: tab,
+      ...filter,
       offset: filteredThreads.length,
       limit: 50
     })
@@ -79,4 +82,10 @@ export default function ThreadList({ initialThreads }: ThreadListProps) {
 
 type ThreadListProps = {
   initialThreads: Thread[]
+  filter: {
+    categoryId?: number
+    userId?: string
+    chatbotName?: string
+    slug?: string
+  }
 }