From 1d2c27abbd2d35d4a3c92c2d78d4dbe1f13fa62b Mon Sep 17 00:00:00 2001
From: JSC <jschoisy@carea5.com>
Date: Sun, 21 Sep 2025 18:17:55 +0200
Subject: [PATCH] feat: enhance loading states with table structure and improve
 sound type filtering in SoundsPage

---
 src/components/tts/TTSList.tsx          | 30 ++++++++++-
 src/components/tts/TTSLoadingStates.tsx | 67 ++++++++++++++++++-------
 src/pages/SoundsPage.tsx                |  2 +-
 3 files changed, 78 insertions(+), 21 deletions(-)

diff --git a/src/components/tts/TTSList.tsx b/src/components/tts/TTSList.tsx
index 813a994..b11a65c 100644
--- a/src/components/tts/TTSList.tsx
+++ b/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>
             ))}
diff --git a/src/components/tts/TTSLoadingStates.tsx b/src/components/tts/TTSLoadingStates.tsx
index 3e62060..c9940af 100644
--- a/src/components/tts/TTSLoadingStates.tsx
+++ b/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">
-      {Array.from({ length: 5 }).map((_, i) => (
-        <Card key={i}>
-          <CardContent className="pt-6">
-            <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>
+    <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) => (
+            <TableRow key={i}>
+              <TableCell className="max-w-md">
                 <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-4 w-16" />
+                  <Skeleton className="h-5 w-12" />
+                  <Skeleton className="h-5 w-16" />
                 </div>
-                <Skeleton className="h-3 w-32" />
-              </div>
-              <Skeleton className="h-8 w-8" />
-            </div>
-          </CardContent>
-        </Card>
-      ))}
+              </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>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
     </div>
   )
 }
diff --git a/src/pages/SoundsPage.tsx b/src/pages/SoundsPage.tsx
index ab723d4..73fb794 100644
--- a/src/pages/SoundsPage.tsx
+++ b/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,