feat: add badge to display sound type in SoundCard component

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
@@ -57,7 +79,7 @@ export function SoundCard({ sound, playSound, onFavoriteToggle, colorClasses }:
           />
         </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" />