new page for transcripts

src/app/(home)/players/[id]/_components/games-table.tsx

@@ -307,7 +307,7 @@ export function GamesTable({ games }: { games: SelectGames[] }) {
                   : 'Game Transcript'}
               </DialogTitle>
               {transcriptGameNumber && (
-                <Button variant='outline' size='sm' asChild>
+                <Button variant='outline' size='sm' asChild className={'mr-10'}>
                   <Link
                     href={`/transcript/${transcriptGameNumber}`}
                     target='_blank'

src/app/transcript/[gameNumber]/page.tsx

@@ -1,64 +1,52 @@
-'use client'
+import { api } from '@/trpc/server'
+import type { Metadata } from 'next'
 
-import { api } from '@/trpc/react'
-import { useParams } from 'next/navigation'
-import { useEffect, useState } from 'react'
-
-export default function TranscriptPage() {
-  const params = useParams()
-  const gameNumber = Number.parseInt(params.gameNumber as string, 10)
-  const [error, setError] = useState<string | null>(null)
-
-  // Use the tRPC useQuery hook to fetch the transcript
-  const { data: transcriptContent, isLoading } =
-    api.history.getTranscript.useQuery(
-      { gameNumber },
-      {
-        // Don't refetch on window focus
-        refetchOnWindowFocus: false,
-        onError: (err) => {
-          setError(`Failed to load transcript: ${err.message}`)
-        },
-      }
-    )
-
-  // Use useEffect to set the document title
-  useEffect(() => {
-    document.title = `Game Transcript #${gameNumber}`
-  }, [gameNumber])
-
-  if (isLoading) {
-    return (
-      <div className='flex h-screen w-screen items-center justify-center'>
-        <div className='text-center'>
-          <div className='mb-2 h-6 w-6 animate-spin rounded-full border-gray-900 border-t-2 border-b-2'></div>
-          <p>Loading transcript...</p>
-        </div>
-      </div>
-    )
+type Props = {
+  params: {
+    gameNumber: string
+  }
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const gameNumber = Number.parseInt(params.gameNumber, 10)
+  return {
+    title: `Game Transcript #${gameNumber}`,
+  }
+}
+
+export default async function TranscriptPage({ params }: Props) {
+  const gameNumber = Number.parseInt(params.gameNumber, 10)
+
+  try {
+    // Fetch transcript data server-side
+    const transcriptContent = await api.history.getTranscript({
+      gameNumber,
+    })
+
+    if (!transcriptContent) {
+      return (
+        <div className='flex h-screen w-screen items-center justify-center'>
+          <p>Failed to load transcript. Please try again.</p>
+        </div>
+      )
+    }
+
+    // Return the transcript content directly as HTML
+    return (
+      <div
+        className='transcript-container'
+        dangerouslySetInnerHTML={{
+          __html: transcriptContent.replace('calc(100% - 126px)', 'auto'),
+        }}
+      />
+    )
+  } catch (error) {
+    return (
+      <div className='flex h-screen w-screen items-center justify-center'>
+        <p className='text-red-500'>
+          Failed to load transcript: {(error as Error).message}
+        </p>
+      </div>
+    )
   }
-
-  if (error) {
-    return (
-      <div className='flex h-screen w-screen items-center justify-center'>
-        <p className='text-red-500'>{error}</p>
-      </div>
-    )
-  }
-
-  if (!transcriptContent) {
-    return (
-      <div className='flex h-screen w-screen items-center justify-center'>
-        <p>Failed to load transcript. Please try again.</p>
-      </div>
-    )
-  }
-
-  // Return the transcript content directly as HTML
-  return (
-    <div
-      className='transcript-container'
-      dangerouslySetInnerHTML={{ __html: transcriptContent }}
-    />
-  )
 }