new page

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

@@ -198,7 +198,8 @@ export function GamesTable({ games }: { games: SelectGames[] }) {
   >(null)
 
   // Use the tRPC useQuery hook to fetch the transcript
-  const { data: transcriptContent, isLoading } = api.history.getTranscript.useQuery(
+  const { data: transcriptContent, isLoading } =
+    api.history.getTranscript.useQuery(
       { gameNumber: transcriptGameNumber ?? 0 },
       {
         // Only fetch when we have a game number and the dialog is open
@@ -299,18 +300,31 @@ export function GamesTable({ games }: { games: SelectGames[] }) {
       <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
         <DialogContent className='max-h-[80vh] w-full overflow-y-auto sm:max-w-[calc(100%-2rem)] '>
           <DialogHeader>
+            <div className='flex items-center justify-between'>
               <DialogTitle>
                 {transcriptGameNumber
                   ? `Game Transcript #${transcriptGameNumber}`
                   : 'Game Transcript'}
               </DialogTitle>
+              {transcriptGameNumber && (
+                <Button variant='outline' size='sm' asChild>
+                  <Link
+                    href={`/transcript/${transcriptGameNumber}`}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                  >
+                    Open in New Page
+                  </Link>
+                </Button>
+              )}
+            </div>
           </DialogHeader>
           {/* Use iframe to isolate the transcript content and prevent style leakage */}
           <div className='!h-[60vh] mt-4 w-full'>
             {isLoading ? (
               <div className='flex h-full w-full items-center justify-center'>
                 <div className='text-center'>
-                  <div className='mb-2 h-6 w-6 animate-spin rounded-full border-b-2 border-t-2 border-gray-900 dark:border-gray-100'></div>
+                  <div className='mb-2 h-6 w-6 animate-spin rounded-full border-gray-900 border-t-2 border-b-2 dark:border-gray-100'></div>
                   <p>Loading transcript...</p>
                 </div>
               </div>

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

@@ -0,0 +1,64 @@
+'use client'
+
+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>
+    )
+  }
+
+  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 }}
+    />
+  )
+}

src/app/transcript/layout.tsx

@@ -0,0 +1,11 @@
+export default function TranscriptLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang='en'>
+      <body>{children}</body>
+    </html>
+  )
+}