From d3c65fc6c2982a4eb0266fed00d088d534ee62a4 Mon Sep 17 00:00:00 2001 From: Jamie Pine Date: Fri, 30 Jan 2026 16:16:05 -0800 Subject: [PATCH 1/5] Enhance HistoryTable Component with Infinite Scroll and Cache Management - Updated HistoryTable to implement infinite scrolling for loading history items dynamically. - Introduced state management for accumulated history and total item count. - Added Intersection Observer for triggering additional data fetches when scrolling. - Implemented cache clearing functionality in the backend to manage voice prompt caches effectively. - Improved loading indicators and user feedback for data fetching states. - Refactored code for better readability and maintainability. --- app/src/components/History/HistoryTable.tsx | 110 +++++++++++++----- .../components/VoiceProfiles/SampleList.tsx | 21 +++- backend/backends/mlx_backend.py | 15 ++- backend/backends/pytorch_backend.py | 2 + backend/main.py | 14 +++ backend/profiles.py | 37 +++--- backend/utils/cache.py | 25 ++++ tauri/src-tauri/gen/Assets.car | Bin 3847048 -> 3847048 bytes 8 files changed, 173 insertions(+), 51 deletions(-) diff --git a/app/src/components/History/HistoryTable.tsx b/app/src/components/History/HistoryTable.tsx index bfb27edd..67abe80d 100644 --- a/app/src/components/History/HistoryTable.tsx +++ b/app/src/components/History/HistoryTable.tsx @@ -1,5 +1,6 @@ -import { AudioWaveform, Download, FileArchive, MoreHorizontal, Play, Trash2 } from 'lucide-react'; +import { AudioWaveform, Download, FileArchive, Loader2, MoreHorizontal, Play, Trash2 } from 'lucide-react'; import { useEffect, useRef, useState } from 'react'; +import type { HistoryResponse } from '@/lib/api/types'; import { Button } from '@/components/ui/button'; import { Dialog, @@ -33,18 +34,21 @@ import { usePlayerStore } from '@/stores/playerStore'; // OLD TABLE-BASED COMPONENT - REMOVED (can be found in git history) // This is the new alternate history view with fixed height rows -// NEW ALTERNATE HISTORY VIEW - FIXED HEIGHT ROWS +// NEW ALTERNATE HISTORY VIEW - FIXED HEIGHT ROWS WITH INFINITE SCROLL export function HistoryTable() { - const [page, _setPage] = useState(0); + const [page, setPage] = useState(0); + const [allHistory, setAllHistory] = useState([]); + const [total, setTotal] = useState(0); const [isScrolled, setIsScrolled] = useState(false); const scrollRef = useRef(null); + const loadMoreRef = useRef(null); const fileInputRef = useRef(null); const [importDialogOpen, setImportDialogOpen] = useState(false); const [selectedFile, setSelectedFile] = useState(null); const limit = 20; const { toast } = useToast(); - const { data: historyData, isLoading } = useHistory({ + const { data: historyData, isLoading, isFetching } = useHistory({ limit, offset: page * limit, }); @@ -60,6 +64,56 @@ export function HistoryTable() { const audioUrl = usePlayerStore((state) => state.audioUrl); const isPlayerVisible = !!audioUrl; + // Update accumulated history when new data arrives + useEffect(() => { + if (historyData?.items) { + setTotal(historyData.total); + if (page === 0) { + // Reset to first page + setAllHistory(historyData.items); + } else { + // Append new items, avoiding duplicates + setAllHistory((prev) => { + const existingIds = new Set(prev.map((item) => item.id)); + const newItems = historyData.items.filter((item) => !existingIds.has(item.id)); + return [...prev, ...newItems]; + }); + } + } + }, [historyData, page]); + + // Reset to page 0 when deletions or imports occur + useEffect(() => { + if (deleteGeneration.isSuccess || importGeneration.isSuccess) { + setPage(0); + setAllHistory([]); + } + }, [deleteGeneration.isSuccess, importGeneration.isSuccess]); + + // Intersection Observer for infinite scroll + useEffect(() => { + const loadMoreEl = loadMoreRef.current; + if (!loadMoreEl) return; + + const observer = new IntersectionObserver( + (entries) => { + const target = entries[0]; + if (target.isIntersecting && !isFetching && allHistory.length < total) { + setPage((prev) => prev + 1); + } + }, + { + root: scrollRef.current, + rootMargin: '100px', + threshold: 0.1, + }, + ); + + observer.observe(loadMoreEl); + return () => observer.disconnect(); + }, [isFetching, allHistory.length, total]); + + // Track scroll position for gradient effect useEffect(() => { const scrollEl = scrollRef.current; if (!scrollEl) return; @@ -113,27 +167,6 @@ export function HistoryTable() { ); }; - const _handleImportClick = () => { - file_handleImportClickk.click(); - }; - - const _handleFileChange = (_e: React.ChangeEvent) => { - cons_handleFileChangeet.files?.[0]; - if (file) { - // Validate file extension - if (!file.name.endsWith('.voicebox.zip')) { - toast({ - title: 'Invalid file type', - description: 'Please select a valid .voicebox.zip file', - variant: 'destructive', - }); - return; - } - setSelectedFile(file); - setImportDialogOpen(true); - } - }; - const handleImportConfirm = () => { if (selectedFile) { importGeneration.mutate(selectedFile, { @@ -159,13 +192,16 @@ export function HistoryTable() { } }; - if (isLoading) { - return null; + if (isLoading && page === 0) { + return ( +
+ +
+ ); } - const history = historyData?.items || []; - const total = historyData?.total || 0; - const _hasMore = history.length === limit && (page + 1) * limit < total; + const history = allHistory; + const hasMore = allHistory.length < total; return (
@@ -284,6 +320,20 @@ export function HistoryTable() {
); })} + + {/* Load more trigger element */} + {hasMore && ( +
+ {isFetching && } +
+ )} + + {/* End of list indicator */} + {!hasMore && history.length > 0 && ( +
+ You've reached the end +
+ )} )} diff --git a/app/src/components/VoiceProfiles/SampleList.tsx b/app/src/components/VoiceProfiles/SampleList.tsx index de848737..b63dfe07 100644 --- a/app/src/components/VoiceProfiles/SampleList.tsx +++ b/app/src/components/VoiceProfiles/SampleList.tsx @@ -2,8 +2,8 @@ import { Plus, Trash2, Play, Edit, Check, X, Volume2, Pause } from 'lucide-react import { useEffect, useRef, useState } from 'react'; import { Button } from '@/components/ui/button'; import { CircleButton } from '@/components/ui/circle-button'; -import { Textarea } from '@/components/ui/textarea'; import { Slider } from '@/components/ui/slider'; +import { Textarea } from '@/components/ui/textarea'; import { useToast } from '@/components/ui/use-toast'; import { apiClient } from '@/lib/api/client'; import { useDeleteSample, useProfileSamples, useUpdateSample } from '@/lib/hooks/useProfiles'; @@ -194,7 +194,9 @@ export function SampleList({ profileId }: SampleListProps) {

No samples yet

-

Add your first audio sample to get started

+

+ Add your first audio sample to get started +

) : (
@@ -206,7 +208,7 @@ export function SampleList({ profileId }: SampleListProps) { key={sample.id} className={cn( 'group relative rounded-lg border bg-card transition-all duration-200', - isEditing ? 'ring-2 ring-primary/20' : 'hover:border-primary/30' + isEditing ? 'ring-2 ring-primary/20' : 'hover:border-primary/30', )} > {isEditing ? ( @@ -287,11 +289,22 @@ export function SampleList({ profileId }: SampleListProps) {
)} - +

+ Note: A single 30-second sample is the sweet spot. Quality may decrease with multiple + samples. In a future update samples might be interchangable and tagged for varying styles of + the same voice. +

+ ); diff --git a/backend/backends/mlx_backend.py b/backend/backends/mlx_backend.py index 7585c656..a019f418 100644 --- a/backend/backends/mlx_backend.py +++ b/backend/backends/mlx_backend.py @@ -175,7 +175,13 @@ class MLXTTSBackend: if cached_prompt is not None: # Return cached prompt (should be dict format) if isinstance(cached_prompt, dict): - return cached_prompt, True + # Validate that the cached audio file still exists + cached_audio_path = cached_prompt.get("ref_audio") or cached_prompt.get("ref_audio_path") + if cached_audio_path and Path(cached_audio_path).exists(): + return cached_prompt, True + else: + # Cached file no longer exists, invalidate cache + print(f"Cached audio file not found: {cached_audio_path}, regenerating prompt") # MLX voice prompt format - store audio path and text # The model will process this during generation @@ -263,6 +269,13 @@ class MLXTTSBackend: ref_audio = voice_prompt.get("ref_audio") or voice_prompt.get("ref_audio_path") ref_text = voice_prompt.get("ref_text", "") + # Validate that the audio file exists + if ref_audio and not Path(ref_audio).exists(): + print(f"Warning: Audio file not found: {ref_audio}") + print("This may be due to a cached voice prompt referencing a deleted temp file.") + print("Regenerating without voice prompt.") + ref_audio = None + # Check if model supports voice cloning via generate method # MLX API may support ref_audio parameter directly try: diff --git a/backend/backends/pytorch_backend.py b/backend/backends/pytorch_backend.py index f03af3e0..cd1257cb 100644 --- a/backend/backends/pytorch_backend.py +++ b/backend/backends/pytorch_backend.py @@ -196,6 +196,8 @@ class PyTorchTTSBackend: # Cache stores as torch.Tensor but actual prompt is dict # Convert if needed if isinstance(cached_prompt, dict): + # For PyTorch backend, the dict should contain tensors, not file paths + # So we can safely return it return cached_prompt, True elif isinstance(cached_prompt, torch.Tensor): # Legacy cache format - convert to dict diff --git a/backend/main.py b/backend/main.py index a8a85a87..83a44bfe 100644 --- a/backend/main.py +++ b/backend/main.py @@ -27,6 +27,7 @@ from . import database, models, profiles, history, tts, transcribe, config, expo from .database import get_db, Generation as DBGeneration, VoiceProfile as DBVoiceProfile from .utils.progress import get_progress_manager from .utils.tasks import get_task_manager +from .utils.cache import clear_voice_prompt_cache from .platform_detect import get_backend_type app = FastAPI( @@ -1495,6 +1496,19 @@ async def delete_model(model_name: str): raise HTTPException(status_code=500, detail=f"Failed to delete model: {str(e)}") +@app.post("/cache/clear") +async def clear_cache(): + """Clear all voice prompt caches (memory and disk).""" + try: + deleted_count = clear_voice_prompt_cache() + return { + "message": f"Voice prompt cache cleared successfully", + "files_deleted": deleted_count, + } + except Exception as e: + raise HTTPException(status_code=500, detail=f"Failed to clear cache: {str(e)}") + + # ============================================ # TASK MANAGEMENT # ============================================ diff --git a/backend/profiles.py b/backend/profiles.py index 81c12876..42f2144b 100644 --- a/backend/profiles.py +++ b/backend/profiles.py @@ -22,6 +22,7 @@ from .database import ( ) from .utils.audio import validate_reference_audio, load_audio, save_audio from .utils.images import validate_image, process_avatar +from .utils.cache import _get_cache_dir from .tts import get_tts_model from . import config @@ -345,23 +346,27 @@ async def create_voice_prompt_for_profile( reference_texts, ) - # Save combined audio temporarily - import tempfile - with tempfile.NamedTemporaryFile(suffix=".wav", delete=False) as tmp: - save_audio(combined_audio, tmp.name, 24000) - tmp_path = tmp.name + # Save combined audio to cache directory (persistent) + # Create a hash of sample IDs to identify this specific combination + import hashlib + sample_ids_str = "-".join(sorted([s.id for s in samples])) + combination_hash = hashlib.md5(sample_ids_str.encode()).hexdigest()[:12] + + # Store in cache directory + cache_dir = _get_cache_dir() + cache_dir.mkdir(parents=True, exist_ok=True) + combined_path = cache_dir / f"combined_{profile_id}_{combination_hash}.wav" + + # Save combined audio + save_audio(combined_audio, str(combined_path), 24000) - try: - # Create prompt from combined audio - voice_prompt, _ = await tts_model.create_voice_prompt( - tmp_path, - combined_text, - use_cache=use_cache, - ) - return voice_prompt - finally: - # Clean up temp file - Path(tmp_path).unlink(missing_ok=True) + # Create prompt from combined audio + voice_prompt, _ = await tts_model.create_voice_prompt( + str(combined_path), + combined_text, + use_cache=use_cache, + ) + return voice_prompt async def upload_avatar( diff --git a/backend/utils/cache.py b/backend/utils/cache.py index a070781f..fddc7b16 100644 --- a/backend/utils/cache.py +++ b/backend/utils/cache.py @@ -88,3 +88,28 @@ def cache_voice_prompt( # Store on disk (torch.save can handle both dicts and tensors) cache_file = _get_cache_dir() / f"{cache_key}.prompt" torch.save(voice_prompt, cache_file) + + +def clear_voice_prompt_cache() -> int: + """ + Clear all voice prompt caches (memory and disk). + + Returns: + Number of cache files deleted + """ + # Clear memory cache + _memory_cache.clear() + + # Clear disk cache + cache_dir = _get_cache_dir() + deleted_count = 0 + + if cache_dir.exists(): + for cache_file in cache_dir.glob("*.prompt"): + try: + cache_file.unlink() + deleted_count += 1 + except Exception as e: + print(f"Failed to delete cache file {cache_file}: {e}") + + return deleted_count diff --git a/tauri/src-tauri/gen/Assets.car b/tauri/src-tauri/gen/Assets.car index 7d0523eebab87e8518bcb2a7af39343dcdae784e..e867da32ad4d85bc551a18d5c316b5e5231534f0 100644 GIT binary patch delta 861 zcmZwGJ5N+W6bJBKR%Cgj0s?}7ithvSeo%OsduJw;mXvmO#?r#V#A3H48$0buY)mLF zrQd+BVCTjdgC>U7KLKsloBZy{DejyzXXbXlertB&)A7d2Xrs|+!#Iq=G)%!HOdS5) zIG)~T!@V{0taqYW?=!qH%gx`1AIz_z!Z;-|t1QV}DpF2p3Pvc(fhi`q)|GbTr1Fy3 z*&~cBLuqnIV)NyT=lknRZ~MN}_e~gr7F>d1xC|q8-?#Jd6Yf(;DH2oBlH!?D2qmLZ zX02Va-dizP2E{9NUS_%O7VUSfLNTSdah$xBoK#YgT;(-IXS37ZF`nh%LdIoj|1R{Z zYR@%`n1T;RCn`O@P&t(pw3g(hs%)~{x&LllMfb0xerzwc3YW?hrH^D|VAz_DMO-egMWyum*5xLdbaF6K^ zT#Hi5a53hk&cV)OAlQU0V8B6u1O>W2*fI5w!kS8B=9!qrO9_EKR=lEII#148LxQKMl*oBvnm89i z5F1=V#iW?YD`z)fzIcAP-g(=1y}oO}7&PG$jKgJ^sQa!}jX#a0^fH!YEN7JKAjt_~ z$QvfSub2}ujjj=VLO4+dGMeXd1gJg z|5<30h{F%0(>vWVV8PX=Tieaod^yY1SNsKIIDg?>$}&BFG3zy)3z&C?^WI>te|+42 GKk*m8GUK`c From 953e6ec7d86a36c16a3e6b520b4aa711e8e702e6 Mon Sep 17 00:00:00 2001 From: Jamie Pine Date: Fri, 30 Jan 2026 16:16:17 -0800 Subject: [PATCH 2/5] Refactor import order and fix typo in SampleList component - Rearranged import statements for consistency and clarity. - Corrected the spelling of "interchangeable" in the note about sample quality. --- app/src/components/VoiceProfiles/SampleList.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/src/components/VoiceProfiles/SampleList.tsx b/app/src/components/VoiceProfiles/SampleList.tsx index b63dfe07..4c5b995d 100644 --- a/app/src/components/VoiceProfiles/SampleList.tsx +++ b/app/src/components/VoiceProfiles/SampleList.tsx @@ -1,4 +1,4 @@ -import { Plus, Trash2, Play, Edit, Check, X, Volume2, Pause } from 'lucide-react'; +import { Check, Edit, Pause, Play, Plus, Trash2, Volume2, X } from 'lucide-react'; import { useEffect, useRef, useState } from 'react'; import { Button } from '@/components/ui/button'; import { CircleButton } from '@/components/ui/circle-button'; @@ -301,8 +301,8 @@ export function SampleList({ profileId }: SampleListProps) {

Note: A single 30-second sample is the sweet spot. Quality may decrease with multiple - samples. In a future update samples might be interchangable and tagged for varying styles of - the same voice. + samples. In a future update samples might be interchangeable and tagged for varying styles + of the same voice.

From 971604d14f653e82b955da19a1d08a1287875d08 Mon Sep 17 00:00:00 2001 From: Jamie Pine Date: Fri, 30 Jan 2026 16:50:24 -0800 Subject: [PATCH 3/5] Implement profile cache management in audio processing - Added `clear_profile_cache` function to manage cache files for specific profiles. - Integrated cache clearing in `add_profile_sample`, `delete_profile`, and `delete_profile_sample` functions to ensure stale audio caches are invalidated after modifications. - Enhanced `clear_voice_prompt_cache` to also delete combined audio files, improving overall cache management. --- backend/profiles.py | 23 ++++++++++++++++++++++- backend/utils/cache.py | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 57 insertions(+), 1 deletion(-) diff --git a/backend/profiles.py b/backend/profiles.py index 42f2144b..cda6bee0 100644 --- a/backend/profiles.py +++ b/backend/profiles.py @@ -22,7 +22,7 @@ from .database import ( ) from .utils.audio import validate_reference_audio, load_audio, save_audio from .utils.images import validate_image, process_avatar -from .utils.cache import _get_cache_dir +from .utils.cache import _get_cache_dir, clear_profile_cache from .tts import get_tts_model from . import config @@ -121,6 +121,10 @@ async def add_profile_sample( db.commit() db.refresh(db_sample) + # Invalidate combined audio cache for this profile + # Since a new sample was added, any cached combined audio is now stale + clear_profile_cache(profile_id) + return ProfileSampleResponse.model_validate(db_sample) @@ -242,6 +246,9 @@ async def delete_profile( if profile_dir.exists(): shutil.rmtree(profile_dir) + # Clean up combined audio cache files for this profile + clear_profile_cache(profile_id) + return True @@ -263,6 +270,9 @@ async def delete_profile_sample( if not sample: return False + # Store profile_id before deleting + profile_id = sample.profile_id + # Delete audio file audio_path = Path(sample.audio_path) if audio_path.exists(): @@ -272,6 +282,10 @@ async def delete_profile_sample( db.delete(sample) db.commit() + # Invalidate combined audio cache for this profile + # Since the sample set changed, any cached combined audio is now stale + clear_profile_cache(profile_id) + return True @@ -295,10 +309,17 @@ async def update_profile_sample( if not sample: return None + # Store profile_id before updating + profile_id = sample.profile_id + sample.reference_text = reference_text db.commit() db.refresh(sample) + # Invalidate combined audio cache for this profile + # Since the reference text changed, cache keys and combined text are now stale + clear_profile_cache(profile_id) + return ProfileSampleResponse.model_validate(sample) diff --git a/backend/utils/cache.py b/backend/utils/cache.py index fddc7b16..1c420ba0 100644 --- a/backend/utils/cache.py +++ b/backend/utils/cache.py @@ -105,11 +105,46 @@ def clear_voice_prompt_cache() -> int: deleted_count = 0 if cache_dir.exists(): + # Delete prompt cache files for cache_file in cache_dir.glob("*.prompt"): try: cache_file.unlink() deleted_count += 1 except Exception as e: print(f"Failed to delete cache file {cache_file}: {e}") + + # Delete combined audio files + for audio_file in cache_dir.glob("combined_*.wav"): + try: + audio_file.unlink() + deleted_count += 1 + except Exception as e: + print(f"Failed to delete combined audio file {audio_file}: {e}") + + return deleted_count + + +def clear_profile_cache(profile_id: str) -> int: + """ + Clear cache files for a specific profile. + + Args: + profile_id: Profile ID + + Returns: + Number of cache files deleted + """ + cache_dir = _get_cache_dir() + deleted_count = 0 + + if cache_dir.exists(): + # Delete combined audio files for this profile + pattern = f"combined_{profile_id}_*.wav" + for audio_file in cache_dir.glob(pattern): + try: + audio_file.unlink() + deleted_count += 1 + except Exception as e: + print(f"Failed to delete combined audio file {audio_file}: {e}") return deleted_count From 146ef5aaeb4f23c473e63bf39ceed3642dc113b9 Mon Sep 17 00:00:00 2001 From: Jamie Pine Date: Fri, 30 Jan 2026 17:06:12 -0800 Subject: [PATCH 4/5] Add delete confirmation dialogs in HistoryTable and SampleList components - Implemented delete confirmation dialogs for both HistoryTable and SampleList components to enhance user experience and prevent accidental deletions. - Added state management for handling the selected item to be deleted and the visibility of the delete dialog. - Refactored delete handling functions to utilize the new dialog confirmation flow, improving code clarity and maintainability. --- app/src/components/History/HistoryTable.tsx | 46 +++++++++++++++- .../components/VoiceProfiles/SampleList.tsx | 54 +++++++++++++++++-- 2 files changed, 95 insertions(+), 5 deletions(-) diff --git a/app/src/components/History/HistoryTable.tsx b/app/src/components/History/HistoryTable.tsx index 67abe80d..38c4361e 100644 --- a/app/src/components/History/HistoryTable.tsx +++ b/app/src/components/History/HistoryTable.tsx @@ -45,6 +45,8 @@ export function HistoryTable() { const fileInputRef = useRef(null); const [importDialogOpen, setImportDialogOpen] = useState(false); const [selectedFile, setSelectedFile] = useState(null); + const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); + const [generationToDelete, setGenerationToDelete] = useState<{ id: string; name: string } | null>(null); const limit = 20; const { toast } = useToast(); @@ -167,6 +169,19 @@ export function HistoryTable() { ); }; + const handleDeleteClick = (generationId: string, profileName: string) => { + setGenerationToDelete({ id: generationId, name: profileName }); + setDeleteDialogOpen(true); + }; + + const handleDeleteConfirm = () => { + if (generationToDelete) { + deleteGeneration.mutate(generationToDelete.id); + setDeleteDialogOpen(false); + setGenerationToDelete(null); + } + }; + const handleImportConfirm = () => { if (selectedFile) { importGeneration.mutate(selectedFile, { @@ -307,7 +322,7 @@ export function HistoryTable() { Export Package deleteGeneration.mutate(gen.id)} + onClick={() => handleDeleteClick(gen.id, gen.profile_name)} disabled={deleteGeneration.isPending} className="text-destructive focus:text-destructive" > @@ -338,6 +353,35 @@ export function HistoryTable() { )} + + + + Delete Generation + + Are you sure you want to delete this generation from "{generationToDelete?.name}"? This action cannot be undone. + + + + + + + + + diff --git a/app/src/components/VoiceProfiles/SampleList.tsx b/app/src/components/VoiceProfiles/SampleList.tsx index 4c5b995d..19aa1ca8 100644 --- a/app/src/components/VoiceProfiles/SampleList.tsx +++ b/app/src/components/VoiceProfiles/SampleList.tsx @@ -2,6 +2,14 @@ import { Check, Edit, Pause, Play, Plus, Trash2, Volume2, X } from 'lucide-react import { useEffect, useRef, useState } from 'react'; import { Button } from '@/components/ui/button'; import { CircleButton } from '@/components/ui/circle-button'; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from '@/components/ui/dialog'; import { Slider } from '@/components/ui/slider'; import { Textarea } from '@/components/ui/textarea'; import { useToast } from '@/components/ui/use-toast'; @@ -140,10 +148,19 @@ export function SampleList({ profileId }: SampleListProps) { const [uploadOpen, setUploadOpen] = useState(false); const [editingSampleId, setEditingSampleId] = useState(null); const [editedText, setEditedText] = useState(''); + const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); + const [sampleToDelete, setSampleToDelete] = useState(null); - const handleDelete = (sampleId: string) => { - if (confirm('Are you sure you want to delete this sample?')) { - deleteSample.mutate(sampleId); + const handleDeleteClick = (sampleId: string) => { + setSampleToDelete(sampleId); + setDeleteDialogOpen(true); + }; + + const handleDeleteConfirm = () => { + if (sampleToDelete) { + deleteSample.mutate(sampleToDelete); + setDeleteDialogOpen(false); + setSampleToDelete(null); } }; @@ -268,7 +285,7 @@ export function SampleList({ profileId }: SampleListProps) { handleDelete(sample.id)} + onClick={() => handleDeleteClick(sample.id)} disabled={deleteSample.isPending} /> @@ -306,6 +323,35 @@ export function SampleList({ profileId }: SampleListProps) {

+ + + + + Delete Sample + + Are you sure you want to delete this audio sample? This action cannot be undone. + + + + + + + + ); } From e5f4606a6c36b9fdaf5277146d73442f9288a6df Mon Sep 17 00:00:00 2001 From: Jamie Pine Date: Fri, 30 Jan 2026 17:07:35 -0800 Subject: [PATCH 5/5] Update CircleButton component to include default button type - Added a default `type` prop set to 'button' in the CircleButton component to ensure proper button behavior. - Enhanced the component's flexibility by allowing the type to be overridden through props. --- app/src/components/ui/circle-button.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/src/components/ui/circle-button.tsx b/app/src/components/ui/circle-button.tsx index 268843ed..88394399 100644 --- a/app/src/components/ui/circle-button.tsx +++ b/app/src/components/ui/circle-button.tsx @@ -6,10 +6,11 @@ export interface CircleButtonProps extends React.ButtonHTMLAttributes( - ({ className, icon: Icon, ...props }, ref) => { + ({ className, icon: Icon, type = 'button', ...props }, ref) => { return (