Labyricorn/voicebox
1
0
Fork 0
mirror of https://github.com/jamiepine/voicebox.git synced 2026-10-03 09:05:17 -07:00
Code Issues Packages Projects Releases Wiki Activity

Refactor HistoryTable component for improved styling and structure

Browse Source 
- 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.
This commit is contained in:
Jamie Pine
2026-01-25 15:38:37 -08:00
parent 7d1ee4c1b9
commit 041ca15a09
1 changed files with 37 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/components/History/HistoryTable.tsx
+36 -30
View File
@@ -11,9 +11,9 @@ import {
TableHeader, TableHeader,
TableRow, TableRow,
} from '@/components/ui/table'; } from '@/components/ui/table';
import { cn } from '@/lib/utils/cn';
import { apiClient } from '@/lib/api/client'; import { apiClient } from '@/lib/api/client';
import { useDeleteGeneration, useHistory } from '@/lib/hooks/useHistory'; import { useDeleteGeneration, useHistory } from '@/lib/hooks/useHistory';
import { cn } from '@/lib/utils/cn';
import { formatDate, formatDuration } from '@/lib/utils/format'; import { formatDate, formatDuration } from '@/lib/utils/format';
import { usePlayerStore } from '@/stores/playerStore'; import { usePlayerStore } from '@/stores/playerStore';
@@ -70,42 +70,48 @@ export function HistoryTable() {
</div> </div>
) : ( ) : (
<> <>
<div className={cn( <div
"flex-1 min-h-0 overflow-y-auto border rounded-md overflow-x-hidden", className={cn(
isPlayerVisible && "max-h-[calc(100vh-280px)]" '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"> <Table className="w-full table-fixed">
<TableHeader className="sticky top-0 bg-background z-10"> <TableHeader className="sticky top-0 bg-background z-10">
<TableRow> <TableRow>
<TableHead className="w-[40%]">Text</TableHead> <TableHead className="w-[40%]">Text</TableHead>
<TableHead className="w-[15%]">Profile</TableHead> <TableHead className="w-[15%]">Profile</TableHead>
<TableHead className="w-[10%]">Language</TableHead> <TableHead className="w-[10%]">Language</TableHead>
<TableHead className="w-[10%]">Duration</TableHead> <TableHead className="w-[10%]">Duration</TableHead>
<TableHead className="w-[15%]">Created</TableHead> <TableHead className="w-[15%]">Created</TableHead>
<TableHead className="w-[10%] text-right">Actions</TableHead> <TableHead className="w-[10%] text-right">Actions</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{history.map((gen) => { {history.map((gen) => {
const isCurrentlyPlaying = currentAudioId === gen.id && isPlaying; const isCurrentlyPlaying = currentAudioId === gen.id && isPlaying;
return ( return (
<TableRow <TableRow
key={gen.id} key={gen.id}
className={cn( className={cn(isCurrentlyPlaying && 'bg-muted/50', 'cursor-pointer')}
isCurrentlyPlaying && 'bg-muted/50',
'cursor-pointer'
)}
onClick={() => handlePlay(gen.id, gen.text)} onClick={() => handlePlay(gen.id, gen.text)}
> >
<TableCell className="truncate">{gen.text}</TableCell> <TableCell className="truncate">{gen.text}</TableCell>
<TableCell className="truncate">{gen.profile_name}</TableCell> <TableCell className="truncate">{gen.profile_name}</TableCell>
<TableCell> <TableCell>
<Badge variant="outline" className="text-xs">{gen.language}</Badge> <Badge variant="outline" className="text-xs">
{gen.language}
</Badge>
</TableCell> </TableCell>
<TableCell className="text-sm">{formatDuration(gen.duration)}</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"> <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 <CircleButton
icon={Play} icon={Play}
onClick={() => handlePlay(gen.id, gen.text)} onClick={() => handlePlay(gen.id, gen.text)}
@@ -125,10 +131,10 @@ export function HistoryTable() {
</div> </div>
</TableCell> </TableCell>
</TableRow> </TableRow>
); );
})} })}
</TableBody> </TableBody>
</Table> </Table>
</div> </div>
<div className="flex justify-between items-center mt-4 shrink-0"> <div className="flex justify-between items-center mt-4 shrink-0">