feat: enhance loading states with table structure and improve sound type filtering in SoundsPage

src/components/tts/TTSList.tsx

@@ -176,7 +176,35 @@ export function TTSList() {
             {Array.from({ length: 5 }).map((_, i) => (
               <Card key={i}>
                 <CardContent className="pt-6">
-                  <Skeleton className="h-20 w-full" />
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="flex-1 space-y-2">
+                      {/* Badges row */}
+                      <div className="flex items-center gap-2">
+                        <Skeleton className="h-6 w-16" />
+                        <Skeleton className="h-6 w-20" />
+                      </div>
+
+                      {/* Text content */}
+                      <div className="space-y-1">
+                        <Skeleton className="h-4 w-3/4" />
+                        <div className="flex gap-1">
+                          <Skeleton className="h-5 w-12" />
+                          <Skeleton className="h-5 w-16" />
+                        </div>
+                      </div>
+
+                      {/* Date and metadata */}
+                      <div className="flex items-center gap-4">
+                        <Skeleton className="h-3 w-32" />
+                        <Skeleton className="h-3 w-20" />
+                      </div>
+                    </div>
+
+                    {/* Play button */}
+                    <div className="flex items-center gap-2">
+                      <Skeleton className="h-8 w-8 rounded" />
+                    </div>
+                  </div>
                 </CardContent>
               </Card>
             ))}

src/components/tts/TTSLoadingStates.tsx

@@ -1,32 +1,61 @@
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
 import { AlertCircle, Mic, RefreshCw } from 'lucide-react'
 
 export function TTSLoading() {
   return (
-    <div className="space-y-4">
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Text</TableHead>
+            <TableHead>Provider</TableHead>
+            <TableHead>Options</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Created</TableHead>
+            <TableHead className="w-[120px]">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
           {Array.from({ length: 5 }).map((_, i) => (
-        <Card key={i}>
+            <TableRow key={i}>
-          <CardContent className="pt-6">
+              <TableCell className="max-w-md">
-            <div className="flex items-start justify-between gap-4">
-              <div className="flex-1 space-y-2">
-                <div className="flex items-center gap-2">
-                  <Skeleton className="h-5 w-16" />
-                  <Skeleton className="h-5 w-20" />
-                </div>
                 <Skeleton className="h-4 w-3/4" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-6 w-16" />
+              </TableCell>
+              <TableCell>
                 <div className="flex gap-1">
-                  <Skeleton className="h-4 w-12" />
+                  <Skeleton className="h-5 w-12" />
-                  <Skeleton className="h-4 w-16" />
+                  <Skeleton className="h-5 w-16" />
-                </div>
-                <Skeleton className="h-3 w-32" />
                 </div>
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-6 w-20" />
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-32" />
+              </TableCell>
+              <TableCell>
+                <div className="flex items-center gap-1">
+                  <Skeleton className="h-8 w-8" />
                   <Skeleton className="h-8 w-8" />
                 </div>
-          </CardContent>
+              </TableCell>
-        </Card>
+            </TableRow>
           ))}
+        </TableBody>
+      </Table>
     </div>
   )
 }

src/pages/SoundsPage.tsx

@@ -163,7 +163,7 @@ export function SoundsPage() {
       setError(null)
 
       // Determine types to filter by
-      const types = typeFilter === 'all' ? undefined : [typeFilter]
+      const types = typeFilter === 'all' ? ['SDB', 'TTS'] : [typeFilter]
 
       const sounds = await soundsService.getSounds({
         types,