Implement audio player component and integrate with history and sample lists

- Added a new AudioPlayer component for audio playback functionality, utilizing WaveSurfer for waveform visualization.
- Integrated audio playback controls into the HistoryTable and SampleList components, allowing users to play audio directly from their history and samples.
- Updated player state management to handle audio URL, ID, title, and playback state.
- Introduced a custom Slider component for volume control and seek functionality.
- Enhanced UI to ensure the AudioPlayer is always visible except in settings, improving user experience.

app/src/stores/playerStore.ts

@@ -1,37 +1,55 @@
 import { create } from 'zustand';
 
 interface PlayerState {
-  currentAudioId: string | null;
+  audioUrl: string | null;
+  audioId: string | null;
+  title: string | null;
   isPlaying: boolean;
   currentTime: number;
   duration: number;
   volume: number;
+  isLooping: boolean;
 
-  setCurrentAudio: (audioId: string | null) => void;
+  setAudio: (url: string, id: string, title?: string) => void;
   setIsPlaying: (playing: boolean) => void;
   setCurrentTime: (time: number) => void;
   setDuration: (duration: number) => void;
   setVolume: (volume: number) => void;
+  toggleLoop: () => void;
   reset: () => void;
 }
 
 export const usePlayerStore = create<PlayerState>((set) => ({
-  currentAudioId: null,
+  audioUrl: null,
+  audioId: null,
+  title: null,
   isPlaying: false,
   currentTime: 0,
   duration: 0,
   volume: 1,
+  isLooping: false,
 
-  setCurrentAudio: (audioId) => set({ currentAudioId: audioId, currentTime: 0, isPlaying: false }),
+  setAudio: (url, id, title) =>
+    set({
+      audioUrl: url,
+      audioId: id,
+      title: title || null,
+      currentTime: 0,
+      isPlaying: false,
+    }),
   setIsPlaying: (playing) => set({ isPlaying: playing }),
   setCurrentTime: (time) => set({ currentTime: time }),
   setDuration: (duration) => set({ duration }),
   setVolume: (volume) => set({ volume }),
+  toggleLoop: () => set((state) => ({ isLooping: !state.isLooping })),
   reset: () =>
     set({
-      currentAudioId: null,
+      audioUrl: null,
+      audioId: null,
+      title: null,
       isPlaying: false,
       currentTime: 0,
       duration: 0,
+      isLooping: false,
     }),
 }));