mirror of
https://github.com/jamiepine/voicebox.git
synced 2026-09-18 14:20:42 -07:00
Enhance App UI with logo and animations
- Added a voicebox logo to the loading screen in the App component for improved branding. - Introduced fade-in animations for the logo and loading text to enhance user experience. - Updated Sidebar component styles for better visual consistency. - Refactored HistoryTable to implement a new fixed-height row layout, improving readability and interaction. - Removed unused Badge component from GenerationForm for cleaner code.
This commit is contained in:
Jamie Pine
@@ -2,7 +2,6 @@ import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { Loader2, Mic } from 'lucide-react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import * as z from 'zod';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import {
|
||||
@@ -104,7 +103,7 @@ export function GenerationForm() {
|
||||
<div className="mt-2 p-3 border rounded-md bg-muted/50 flex items-center gap-2">
|
||||
<Mic className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="font-medium">{selectedProfile.name}</span>
|
||||
<Badge variant="outline">{selectedProfile.language}</Badge>
|
||||
<span className="text-sm text-muted-foreground">{selectedProfile.language}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-2 p-3 border border-dashed rounded-md text-sm text-muted-foreground">
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { Download, MoreHorizontal, Play, Trash2 } from 'lucide-react';
|
||||
import { AudioWaveform, Download, MoreHorizontal, Play, Trash2 } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
DropdownMenu,
|
||||
@@ -8,20 +7,17 @@ import {
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
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';
|
||||
|
||||
// OLD TABLE-BASED COMPONENT - REMOVED (can be found in git history)
|
||||
// This is the new alternate history view with fixed height rows
|
||||
|
||||
// NEW ALTERNATE HISTORY VIEW - FIXED HEIGHT ROWS
|
||||
export function HistoryTable() {
|
||||
const [page, setPage] = useState(0);
|
||||
const limit = 20;
|
||||
@@ -77,80 +73,99 @@ export function HistoryTable() {
|
||||
<>
|
||||
<div
|
||||
className={cn(
|
||||
'flex-1 min-h-0 overflow-y-auto border rounded-md overflow-x-hidden',
|
||||
'flex-1 min-h-0 overflow-y-auto space-y-2',
|
||||
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-[38%]">Input</TableHead>
|
||||
<TableHead className="w-[13%]">Voice</TableHead>
|
||||
<TableHead className="w-[9%]">Lang</TableHead>
|
||||
<TableHead className="w-[9%]">Length</TableHead>
|
||||
<TableHead className="w-[13%]">Date</TableHead>
|
||||
<TableHead className="w-[8%] text-right"></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')}
|
||||
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 text-muted-foreground">
|
||||
{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-right">
|
||||
<div className="flex justify-end" onClick={(e) => e.stopPropagation()}>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 rounded-full"
|
||||
aria-label="Actions"
|
||||
>
|
||||
<MoreHorizontal className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => handlePlay(gen.id, gen.text)}>
|
||||
<Play className="mr-2 h-4 w-4" />
|
||||
Play
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleDownload(gen.id, gen.text)}>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
Download
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => deleteGeneration.mutate(gen.id)}
|
||||
disabled={deleteGeneration.isPending}
|
||||
className="text-destructive focus:text-destructive"
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
{history.map((gen) => {
|
||||
const isCurrentlyPlaying = currentAudioId === gen.id && isPlaying;
|
||||
return (
|
||||
<div
|
||||
key={gen.id}
|
||||
className={cn(
|
||||
'flex items-stretch gap-4 h-24 border rounded-md p-3 bg-card hover:bg-muted/70 transition-colors cursor-pointer',
|
||||
isCurrentlyPlaying && 'bg-muted/70',
|
||||
)}
|
||||
onClick={() => handlePlay(gen.id, gen.text)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
handlePlay(gen.id, gen.text);
|
||||
}
|
||||
}}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
aria-label="Play audio"
|
||||
>
|
||||
{/* Waveform icon */}
|
||||
<div className="flex items-center shrink-0">
|
||||
<AudioWaveform className="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
{/* Left side - Meta information */}
|
||||
<div className="flex flex-col gap-1.5 w-48 shrink-0 justify-center">
|
||||
<div className="font-medium text-sm truncate" title={gen.profile_name}>
|
||||
{gen.profile_name}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{gen.language}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{formatDuration(gen.duration)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{formatDate(gen.created_at)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right side - Transcript textarea */}
|
||||
<div className="flex-1 min-w-0 flex">
|
||||
<Textarea
|
||||
readOnly
|
||||
value={gen.text}
|
||||
className="flex-1 resize-none text-sm text-muted-foreground"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Far right - Ellipsis actions */}
|
||||
<div className="w-10 shrink-0 flex justify-end" onClick={(e) => e.stopPropagation()}>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
aria-label="Actions"
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => handlePlay(gen.id, gen.text)}>
|
||||
<Play className="mr-2 h-4 w-4" />
|
||||
Play
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleDownload(gen.id, gen.text)}>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
Download
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => deleteGeneration.mutate(gen.id)}
|
||||
disabled={deleteGeneration.isPending}
|
||||
className="text-destructive focus:text-destructive"
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center mt-4 shrink-0">
|
||||
|
||||
@@ -37,8 +37,8 @@ export function Sidebar({ activeTab, onTabChange }: SidebarProps) {
|
||||
onClick={() => onTabChange(tab.id)}
|
||||
className={cn(
|
||||
'w-12 h-12 rounded-full flex items-center justify-center transition-all duration-200',
|
||||
'hover:bg-accent hover:text-accent-foreground',
|
||||
isActive ? 'bg-accent text-accent-foreground shadow-lg' : 'text-muted-foreground',
|
||||
'hover:bg-muted/50',
|
||||
isActive ? 'bg-muted/50 text-foreground shadow-lg' : 'text-muted-foreground',
|
||||
)}
|
||||
title={tab.label}
|
||||
aria-label={tab.label}
|
||||
|
||||
Reference in New Issue
Block a user