feat: enhance PlaylistStatsCard with NumberFlow for dynamic track count and duration display

src/components/playlists/playlist-edit/PlaylistStatsCard.tsx

@@ -1,7 +1,8 @@
 import { Badge } from '@/components/ui/badge'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { NumberFlowDuration } from '@/components/ui/number-flow-duration'
 import type { Playlist, PlaylistSound } from '@/lib/api/services/playlists'
-import { formatDuration } from '@/utils/format-duration'
+import NumberFlow from '@number-flow/react'
 import { Clock } from 'lucide-react'
 
 interface PlaylistStatsCardProps {
@@ -26,12 +27,12 @@ export function PlaylistStatsCard({ playlist, sounds }: PlaylistStatsCardProps)
       <CardContent className="space-y-4">
         <div className="grid grid-cols-2 gap-4">
           <div className="text-center p-3 bg-muted rounded-lg">
-            <div className="text-2xl font-bold">{sounds.length}</div>
+            <div className="text-2xl font-bold"><NumberFlow value={sounds.length} /></div>
             <div className="text-sm text-muted-foreground">Tracks</div>
           </div>
           <div className="text-center p-3 bg-muted rounded-lg">
             <div className="text-2xl font-bold">
-              {formatDuration(totalDuration)}
+              <NumberFlowDuration duration={totalDuration} variant='wordy' />
             </div>
             <div className="text-sm text-muted-foreground">Duration</div>
           </div>