From 41659c9299f59e04d359a1b377c43e468c2ac682 Mon Sep 17 00:00:00 2001
From: JSC <jschoisy@carea5.com>
Date: Sun, 21 Sep 2025 15:39:04 +0200
Subject: [PATCH] feat: add badge to display sound type in SoundCard component

---
 src/components/sounds/SoundCard.tsx | 32 ++++++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/sounds/SoundCard.tsx b/src/components/sounds/SoundCard.tsx
index 0289cfa..c2f533e 100644
--- a/src/components/sounds/SoundCard.tsx
+++ b/src/components/sounds/SoundCard.tsx
@@ -1,4 +1,5 @@
 import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
 import { type Sound } from '@/lib/api/services/sounds'
 import { cn } from '@/lib/utils'
 import { formatDuration } from '@/utils/format-duration'
@@ -27,6 +28,19 @@ export function SoundCard({ sound, playSound, onFavoriteToggle, colorClasses }:
     onFavoriteToggle(sound.id, !sound.is_favorited)
   }
 
+  const getBadgeVariant = (type: Sound['type']) => {
+    switch (type) {
+      case 'SDB':
+        return 'default'
+      case 'TTS':
+        return 'secondary'
+      case 'EXT':
+        return 'outline'
+      default:
+        return 'default'
+    }
+  }
+
   return (
     <Card
       onClick={handlePlaySound}
@@ -36,6 +50,14 @@ export function SoundCard({ sound, playSound, onFavoriteToggle, colorClasses }:
       )}
     >
       <CardContent className="grid grid-cols-1 pl-3 pr-3 gap-1">
+        {/* Type badge */}
+        <Badge
+          variant={getBadgeVariant(sound.type)}
+          className="absolute top-2 left-2 text-xs px-1.5 py-0.5 h-5"
+        >
+          {sound.type}
+        </Badge>
+
         {/* Favorite button */}
         <button
           data-favorite-button
@@ -43,21 +65,21 @@ export function SoundCard({ sound, playSound, onFavoriteToggle, colorClasses }:
           className={cn(
             'absolute top-2 right-2 p-1 rounded-full transition-all duration-200 hover:scale-110',
             'bg-background/80 hover:bg-background/90 shadow-sm',
-            sound.is_favorited 
-              ? 'text-red-500 hover:text-red-600' 
+            sound.is_favorited
+              ? 'text-red-500 hover:text-red-600'
               : 'text-muted-foreground hover:text-foreground'
           )}
           title={sound.is_favorited ? 'Remove from favorites' : 'Add to favorites'}
         >
-          <Heart 
+          <Heart
             className={cn(
               'h-3.5 w-3.5 transition-all duration-200',
               sound.is_favorited && 'fill-current'
-            )} 
+            )}
           />
         </button>
 
-        <h3 className="font-medium text-s truncate pr-8">{sound.name}</h3>
+        <h3 className="font-medium text-s truncate pl-12 pr-8">{sound.name}</h3>
         <div className="grid grid-cols-2 gap-1 text-xs text-muted-foreground">
           <div className="flex">
             <Clock className="h-3.5 w-3.5 mr-0.5" />