Add source version selection when applying effects, voices tab overhaul with inline inspector

app/src/components/VoiceProfiles/ProfileCard.tsx

@@ -1,4 +1,4 @@
-import { Download, Edit, Mic, Sparkles, Trash2 } from 'lucide-react';
+import { Download, Edit, Sparkles, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -15,7 +15,6 @@ import {
 import type { VoiceProfileResponse } from '@/lib/api/types';
 import { useDeleteProfile, useExportProfile } from '@/lib/hooks/useProfiles';
 import { cn } from '@/lib/utils/cn';
-import { useServerStore } from '@/stores/serverStore';
 import { useUIStore } from '@/stores/uiStore';
 
 interface ProfileCardProps {
@@ -24,19 +23,16 @@ interface ProfileCardProps {
 
 export function ProfileCard({ profile }: ProfileCardProps) {
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [avatarError, setAvatarError] = useState(false);
+
   const deleteProfile = useDeleteProfile();
   const exportProfile = useExportProfile();
   const setEditingProfileId = useUIStore((state) => state.setEditingProfileId);
   const setProfileDialogOpen = useUIStore((state) => state.setProfileDialogOpen);
   const selectedProfileId = useUIStore((state) => state.selectedProfileId);
   const setSelectedProfileId = useUIStore((state) => state.setSelectedProfileId);
-  const serverUrl = useServerStore((state) => state.serverUrl);
 
   const isSelected = selectedProfileId === profile.id;
 
-  const avatarUrl = profile.avatar_path ? `${serverUrl}/profiles/${profile.id}/avatar` : null;
-
   const handleSelect = () => {
     setSelectedProfileId(isSelected ? null : profile.id);
   };
@@ -89,22 +85,7 @@ export function ProfileCard({ profile }: ProfileCardProps) {
         onKeyDown={handleKeyDown}
       >
         <CardHeader className="p-3 pb-2">
-          <CardTitle className="flex items-start gap-1.5 text-base font-medium">
-            <div className="h-6 w-6 mt-[3px] rounded-full bg-muted flex items-center justify-center shrink-0 overflow-hidden">
-              {avatarUrl && !avatarError ? (
-                <img
-                  src={avatarUrl}
-                  alt={`${profile.name} avatar`}
-                  className={cn(
-                    'h-full w-full object-cover transition-all duration-200',
-                    !isSelected && 'grayscale',
-                  )}
-                  onError={() => setAvatarError(true)}
-                />
-              ) : (
-                <Mic className="h-3.5 w-3.5 text-muted-foreground" />
-              )}
-            </div>
+          <CardTitle className="text-base font-medium">
             <span className="break-words">{profile.name}</span>
           </CardTitle>
         </CardHeader>
@@ -117,7 +98,7 @@ export function ProfileCard({ profile }: ProfileCardProps) {
               {profile.language}
             </Badge>
             {profile.effects_chain && profile.effects_chain.length > 0 && (
-              <Sparkles className="h-3.5 w-3.5 text-accent" />
+              <Sparkles className="h-3.5 w-3.5 text-accent fill-accent" />
             )}
           </div>
           <div className="flex gap-0.5 justify-end items-end mt-auto">