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,50 +1,27 @@
-'use client'
+import { api } from '@/trpc/server'
+import type { Metadata } from 'next'
 
-import { api } from '@/trpc/react'
+type Props = {
-import { useParams } from 'next/navigation'
+  params: {
-import { useEffect, useState } from 'react'
+    gameNumber: string
-
-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>
-    )
 }
 
-  if (error) {
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
-    return (
+  const gameNumber = Number.parseInt(params.gameNumber, 10)
-      <div className='flex h-screen w-screen items-center justify-center'>
+  return {
-        <p className='text-red-500'>{error}</p>
+    title: `Game Transcript #${gameNumber}`,
-      </div>
-    )
   }
+}
+
+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 (
@@ -58,7 +35,18 @@ export default function TranscriptPage() {
     return (
       <div
         className='transcript-container'
-      dangerouslySetInnerHTML={{ __html: transcriptContent }}
+        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>
+    )
+  }
 }