Labyricorn/voicebox
1
0
Fork 0
mirror of https://github.com/jamiepine/voicebox.git synced 2026-10-04 09:35:16 -07:00
Code Issues Packages Projects Releases Wiki Activity

Refactor ProfileForm and SampleList components for improved UI and functionality

Browse Source 
- Updated button styles in ProfileForm for better visual consistency and user experience.
- Replaced Pencil icon with Edit in SampleList for clearer action representation.
- Introduced CircleButton component for action buttons in SampleList, enhancing UI responsiveness and clarity.
- Improved layout and hover effects for action buttons in SampleList to streamline user interactions.
This commit is contained in:
Jamie Pine
2026-01-29 19:32:05 -08:00
parent 89f3127c37
commit 60012b81c0
2 changed files with 11 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/components/VoiceProfiles/ProfileForm.tsx
+1 -1
View File
@@ -810,7 +810,7 @@ export function ProfileForm() {
type="button" type="button"
onClick={handleRemoveAvatar} onClick={handleRemoveAvatar}
disabled={deleteAvatar.isPending} disabled={deleteAvatar.isPending}
className="absolute bottom-0 right-0 h-6 w-6 rounded-full bg-destructive text-destructive-foreground flex items-center justify-center hover:bg-destructive/90 transition-colors shadow-sm" className="absolute bottom-0 right-0 h-6 w-6 rounded-full bg-background/60 backdrop-blur-sm text-muted-foreground flex items-center justify-center hover:bg-background/80 hover:text-foreground transition-colors shadow-sm border border-border/50"
> >
<X className="h-3.5 w-3.5" /> <X className="h-3.5 w-3.5" />
</button> </button>
app/src/components/VoiceProfiles/SampleList.tsx
+10 -19
View File
@@ -1,6 +1,7 @@
import { Plus, Trash2, Play, Pencil, Check, X, Volume2, Pause } from 'lucide-react'; import { Plus, Trash2, Play, Edit, Check, X, Volume2, Pause } from 'lucide-react';
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { CircleButton } from '@/components/ui/circle-button';
import { Textarea } from '@/components/ui/textarea'; import { Textarea } from '@/components/ui/textarea';
import { Slider } from '@/components/ui/slider'; import { Slider } from '@/components/ui/slider';
import { useToast } from '@/components/ui/use-toast'; import { useToast } from '@/components/ui/use-toast';
@@ -212,7 +213,7 @@ export function SampleList({ profileId }: SampleListProps) {
/* Edit Mode */ /* Edit Mode */
<div className="p-4 space-y-3"> <div className="p-4 space-y-3">
<div className="flex items-center gap-2 text-xs text-muted-foreground mb-2"> <div className="flex items-center gap-2 text-xs text-muted-foreground mb-2">
<Pencil className="h-3 w-3" /> <Edit className="h-3 w-3" />
<span>Editing transcription</span> <span>Editing transcription</span>
</div> </div>
<Textarea <Textarea
@@ -256,28 +257,18 @@ export function SampleList({ profileId }: SampleListProps) {
</div> </div>
{/* Action Buttons */} {/* Action Buttons */}
<div className="shrink-0 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity"> <div className="shrink-0 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
<Button <CircleButton
type="button" icon={Edit}
variant="ghost"
size="icon"
className="h-8 w-8"
title="Edit transcription" title="Edit transcription"
onClick={() => handleStartEdit(sample.id, sample.reference_text)} onClick={() => handleStartEdit(sample.id, sample.reference_text)}
> />
<Pencil className="h-4 w-4" /> <CircleButton
</Button> icon={Trash2}
<Button
type="button"
variant="ghost"
size="icon"
className="h-8 w-8 text-destructive hover:text-destructive"
title="Delete sample" title="Delete sample"
onClick={() => handleDelete(sample.id)} onClick={() => handleDelete(sample.id)}
disabled={deleteSample.isPending} disabled={deleteSample.isPending}
> />
<Trash2 className="h-4 w-4" />
</Button>
</div> </div>
{/* Sample Number Badge */} {/* Sample Number Badge */}