From 041ca15a09bd0520dbeac179d862a80cbb8b2733 Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Sun, 25 Jan 2026 15:38:37 -0800
Subject: [PATCH] Refactor HistoryTable component for improved styling and
 structure

- Reintroduced the cn utility for class name management in HistoryTable.
- Adjusted the maximum height of the table container for better layout.
- Reformatted the table structure for clearer readability and consistency.
- Enhanced the styling of table cells and buttons for improved user interaction.
---
 app/src/components/History/HistoryTable.tsx | 68 +++++++++++----------
 1 file changed, 37 insertions(+), 31 deletions(-)

diff --git a/app/src/components/History/HistoryTable.tsx b/app/src/components/History/HistoryTable.tsx
index 6f9fa596..dc6b79a6 100644
--- a/app/src/components/History/HistoryTable.tsx
+++ b/app/src/components/History/HistoryTable.tsx
@@ -11,9 +11,9 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
-import { cn } from '@/lib/utils/cn';
 import { apiClient } from '@/lib/api/client';
 import { useDeleteGeneration, useHistory } from '@/lib/hooks/useHistory';
+import { cn } from '@/lib/utils/cn';
 import { formatDate, formatDuration } from '@/lib/utils/format';
 import { usePlayerStore } from '@/stores/playerStore';
 
@@ -70,42 +70,48 @@ export function HistoryTable() {
         </div>
       ) : (
         <>
-          <div className={cn(
-            "flex-1 min-h-0 overflow-y-auto border rounded-md overflow-x-hidden",
-            isPlayerVisible && "max-h-[calc(100vh-280px)]"
-          )}>
+          <div
+            className={cn(
+              'flex-1 min-h-0 overflow-y-auto border rounded-md overflow-x-hidden',
+              isPlayerVisible && 'max-h-[calc(100vh-220px)]',
+            )}
+          >
             <Table className="w-full table-fixed">
-                <TableHeader className="sticky top-0 bg-background z-10">
-                  <TableRow>
-                    <TableHead className="w-[40%]">Text</TableHead>
-                    <TableHead className="w-[15%]">Profile</TableHead>
-                    <TableHead className="w-[10%]">Language</TableHead>
-                    <TableHead className="w-[10%]">Duration</TableHead>
-                    <TableHead className="w-[15%]">Created</TableHead>
-                    <TableHead className="w-[10%] text-right">Actions</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {history.map((gen) => {
-                    const isCurrentlyPlaying = currentAudioId === gen.id && isPlaying;
-                    return (
-                    <TableRow 
+              <TableHeader className="sticky top-0 bg-background z-10">
+                <TableRow>
+                  <TableHead className="w-[40%]">Text</TableHead>
+                  <TableHead className="w-[15%]">Profile</TableHead>
+                  <TableHead className="w-[10%]">Language</TableHead>
+                  <TableHead className="w-[10%]">Duration</TableHead>
+                  <TableHead className="w-[15%]">Created</TableHead>
+                  <TableHead className="w-[10%] text-right">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {history.map((gen) => {
+                  const isCurrentlyPlaying = currentAudioId === gen.id && isPlaying;
+                  return (
+                    <TableRow
                       key={gen.id}
-                      className={cn(
-                        isCurrentlyPlaying && 'bg-muted/50',
-                        'cursor-pointer'
-                      )}
+                      className={cn(isCurrentlyPlaying && 'bg-muted/50', 'cursor-pointer')}
                       onClick={() => handlePlay(gen.id, gen.text)}
                     >
                       <TableCell className="truncate">{gen.text}</TableCell>
                       <TableCell className="truncate">{gen.profile_name}</TableCell>
                       <TableCell>
-                        <Badge variant="outline" className="text-xs">{gen.language}</Badge>
+                        <Badge variant="outline" className="text-xs">
+                          {gen.language}
+                        </Badge>
                       </TableCell>
                       <TableCell className="text-sm">{formatDuration(gen.duration)}</TableCell>
-                      <TableCell className="text-xs text-muted-foreground/60">{formatDate(gen.created_at)}</TableCell>
+                      <TableCell className="text-xs text-muted-foreground/60">
+                        {formatDate(gen.created_at)}
+                      </TableCell>
                       <TableCell className="text-right">
-                        <div className="flex justify-end gap-0.5" onClick={(e) => e.stopPropagation()}>
+                        <div
+                          className="flex justify-end gap-0.5"
+                          onClick={(e) => e.stopPropagation()}
+                        >
                           <CircleButton
                             icon={Play}
                             onClick={() => handlePlay(gen.id, gen.text)}
@@ -125,10 +131,10 @@ export function HistoryTable() {
                         </div>
                       </TableCell>
                     </TableRow>
-                    );
-                  })}
-                </TableBody>
-              </Table>
+                  );
+                })}
+              </TableBody>
+            </Table>
           </div>
 
           <div className="flex justify-between items-center mt-4 shrink-0">