From 32140d7b5acb6f41ac12179702ae3e20f0bb3811 Mon Sep 17 00:00:00 2001
From: JSC <jschoisy@carea5.com>
Date: Fri, 15 Aug 2025 13:17:16 +0200
Subject: [PATCH] feat: enhance PlaylistStatsCard with NumberFlow for dynamic
 track count and duration display

---
 .../playlists/playlist-edit/PlaylistStatsCard.tsx          | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/playlists/playlist-edit/PlaylistStatsCard.tsx b/src/components/playlists/playlist-edit/PlaylistStatsCard.tsx
index dcda30d..4d2e5ad 100644
--- a/src/components/playlists/playlist-edit/PlaylistStatsCard.tsx
+++ b/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>