Refactor ProfileForm for improved readability and maintainability

- Reorganized import statements for clarity.
- Enhanced conditional checks for restoring saved files with improved formatting.
- Streamlined draft saving logic by consolidating variable declarations.
- Updated UI components for better structure and readability in the form layout.
This commit is contained in:
Jamie Pine
2026-01-29 18:56:22 -08:00
parent 7b5e73cfa8
commit ef3c3a7f8c
@@ -43,7 +43,7 @@ import { useSystemAudioCapture } from '@/lib/hooks/useSystemAudioCapture';
import { useTranscription } from '@/lib/hooks/useTranscription'; import { useTranscription } from '@/lib/hooks/useTranscription';
import { isTauri } from '@/lib/tauri'; import { isTauri } from '@/lib/tauri';
import { formatAudioDuration, getAudioDuration } from '@/lib/utils/audio'; import { formatAudioDuration, getAudioDuration } from '@/lib/utils/audio';
import { useUIStore, type ProfileFormDraft } from '@/stores/uiStore'; import { type ProfileFormDraft, useUIStore } from '@/stores/uiStore';
import { AudioSampleRecording } from './AudioSampleRecording'; import { AudioSampleRecording } from './AudioSampleRecording';
import { AudioSampleSystem } from './AudioSampleSystem'; import { AudioSampleSystem } from './AudioSampleSystem';
import { AudioSampleUpload } from './AudioSampleUpload'; import { AudioSampleUpload } from './AudioSampleUpload';
@@ -265,11 +265,15 @@ export function ProfileForm() {
}); });
setSampleMode(profileFormDraft.sampleMode); setSampleMode(profileFormDraft.sampleMode);
// Restore the file if we have it saved // Restore the file if we have it saved
if (profileFormDraft.sampleFileData && profileFormDraft.sampleFileName && profileFormDraft.sampleFileType) { if (
profileFormDraft.sampleFileData &&
profileFormDraft.sampleFileName &&
profileFormDraft.sampleFileType
) {
const file = base64ToFile( const file = base64ToFile(
profileFormDraft.sampleFileData, profileFormDraft.sampleFileData,
profileFormDraft.sampleFileName, profileFormDraft.sampleFileName,
profileFormDraft.sampleFileType profileFormDraft.sampleFileType,
); );
form.setValue('sampleFile', file); form.setValue('sampleFile', file);
} }
@@ -446,7 +450,8 @@ export function ProfileForm() {
if (!newOpen && isCreating) { if (!newOpen && isCreating) {
// Save draft when closing the create modal // Save draft when closing the create modal
const values = form.getValues(); const values = form.getValues();
const hasContent = values.name || values.description || values.referenceText || values.sampleFile; const hasContent =
values.name || values.description || values.referenceText || values.sampleFile;
if (hasContent) { if (hasContent) {
const draft: ProfileFormDraft = { const draft: ProfileFormDraft = {
@@ -491,7 +496,9 @@ export function ProfileForm() {
<DialogContent className="max-w-none w-screen h-screen left-0 top-0 translate-x-0 translate-y-0 rounded-none p-6 overflow-y-auto"> <DialogContent className="max-w-none w-screen h-screen left-0 top-0 translate-x-0 translate-y-0 rounded-none p-6 overflow-y-auto">
<div className="max-w-5xl max-h-[85vh] mx-auto my-auto w-full flex flex-col"> <div className="max-w-5xl max-h-[85vh] mx-auto my-auto w-full flex flex-col">
<DialogHeader> <DialogHeader>
<DialogTitle className="text-2xl">{editingProfileId ? 'Edit Voice' : 'Clone voice'}</DialogTitle> <DialogTitle className="text-2xl">
{editingProfileId ? 'Edit Voice' : 'Clone voice'}
</DialogTitle>
<DialogDescription> <DialogDescription>
{editingProfileId {editingProfileId
? 'Update your voice profile details and manage samples.' ? 'Update your voice profile details and manage samples.'
@@ -579,7 +586,8 @@ export function ProfileForm() {
isValidating={isValidatingAudio} isValidating={isValidatingAudio}
isTranscribing={transcribe.isPending} isTranscribing={transcribe.isPending}
isDisabled={ isDisabled={
audioDuration !== null && audioDuration > MAX_AUDIO_DURATION_SECONDS audioDuration !== null &&
audioDuration > MAX_AUDIO_DURATION_SECONDS
} }
fieldName={name} fieldName={name}
/> />
@@ -723,7 +731,9 @@ export function ProfileForm() {
</Button> </Button>
<Button <Button
type="submit" type="submit"
disabled={createProfile.isPending || updateProfile.isPending || addSample.isPending} disabled={
createProfile.isPending || updateProfile.isPending || addSample.isPending
}
> >
{createProfile.isPending || updateProfile.isPending || addSample.isPending {createProfile.isPending || updateProfile.isPending || addSample.isPending
? 'Saving...' ? 'Saving...'