feat: updates

packages/web/components/New/TrackList.tsx

@@ -3,6 +3,7 @@ import { css, cx } from '@emotion/css'
 import { useMemo } from 'react'
 import { player } from '@/web/store'
 import { useSnapshot } from 'valtio'
+import Wave from './Wave'
 
 const TrackList = ({
   tracks,
@@ -23,18 +24,18 @@ const TrackList = ({
     if (e.detail === 2) onPlay?.(trackID)
   }
 
+  const playing = useMemo(
+    () => playerSnapshot.state === 'playing',
+    [playerSnapshot.state]
+  )
+
   return (
     <div className={className}>
       {tracks?.map(track => (
         <div
           key={track.id}
           onClick={e => handleClick(e, track.id)}
-          className={cx(
-            'flex py-2 text-18 font-medium transition duration-300 ease-in-out',
-            playingTrack?.id === track.id
-              ? 'text-brand-700'
-              : 'text-night-50 dark:hover:text-neutral-200'
-          )}
+          className='relative flex items-center py-2 text-18 font-medium text-night-50 transition duration-300 ease-in-out dark:hover:text-neutral-200'
         >
           <div className='mr-6'>{String(track.no).padStart(2, '0')}</div>
           <div className='flex-grow'>{track.name}</div>
@@ -42,6 +43,13 @@ const TrackList = ({
           <div className='text-right'>
             {formatDuration(track.dt, 'en', 'hh:mm:ss')}
           </div>
+
+          {/* The wave icon */}
+          {playingTrack?.id === track.id && playing && (
+            <div className='absolute -left-7'>
+              <Wave playing={playing} />
+            </div>
+          )}
         </div>
       ))}
     </div>