refactor: update TTSTable component to improve date formatting and remove Sound ID display

src/components/tts/TTSTable.tsx

@@ -1,5 +1,4 @@
-import { format } from 'date-fns'
-import { CheckCircle, Clock, Loader, Mic, Trash2, Volume2 } from 'lucide-react'
+import { Calendar, CheckCircle, Loader, Mic, Trash2, Volume2 } from 'lucide-react'
 
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
@@ -15,6 +14,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip
 import { type TTSResponse, ttsService } from '@/lib/api/services/tts'
 import { soundsService } from '@/lib/api/services/sounds'
 import { toast } from 'sonner'
+import { formatDateDistanceToNow } from '@/utils/format-date'
 
 interface TTSTableProps {
   ttsHistory: TTSResponse[]
@@ -86,7 +86,6 @@ export function TTSTable({ ttsHistory, onTTSDeleted }: TTSTableProps) {
             <TableHead>Status</TableHead>
             <TableHead>Options</TableHead>
             <TableHead>Created</TableHead>
-            <TableHead>Sound ID</TableHead>
             <TableHead className="w-[120px]">Actions</TableHead>
           </TableRow>
         </TableHeader>
@@ -122,17 +121,10 @@ export function TTSTable({ ttsHistory, onTTSDeleted }: TTSTableProps) {
               </TableCell>
               <TableCell>
                 <div className="flex items-center gap-1 text-sm text-muted-foreground">
-                  <Clock className="h-3 w-3" />
-                  {format(new Date(tts.created_at), 'MMM dd, yyyy HH:mm')}
+                  <Calendar className="h-3 w-3" />
+                 {formatDateDistanceToNow(tts.created_at)}
                 </div>
               </TableCell>
-              <TableCell>
-                {tts.sound_id ? (
-                  <span className="text-sm font-mono">{tts.sound_id}</span>
-                ) : (
-                  <span className="text-muted-foreground text-sm">-</span>
-                )}
-              </TableCell>
               <TableCell>
                 <div className="flex items-center gap-1">
                   <Tooltip>

src/lib/api/services/tts.ts

@@ -52,7 +52,7 @@ export interface GetTTSHistoryResponse {
 
 export const ttsService = {
   async generateTTS(request: TTSRequest): Promise<TTSGenerateResponse> {
-    return await apiClient.post('/api/v1/tts/generate', request)
+    return await apiClient.post('/api/v1/tts', request)
   },
 
   async getTTSHistory(params?: GetTTSHistoryParams): Promise<GetTTSHistoryResponse> {
@@ -69,8 +69,8 @@ export const ttsService = {
     }
 
     const url = searchParams.toString()
-      ? `/api/v1/tts/history?${searchParams.toString()}`
-      : '/api/v1/tts/history'
+      ? `/api/v1/tts?${searchParams.toString()}`
+      : '/api/v1/tts'
 
     const ttsArray: TTSResponse[] = await apiClient.get(url)