feat: gray out unsupported profiles instead of filtering, auto-switch engine on selection

- Show all voice profiles with unsupported ones grayed out (opacity) instead of hidden
- Clicking a grayed-out profile selects it and auto-switches the engine to a compatible one
- Sort supported profiles first, with info tip about compatibility at the bottom
- Scroll to selected profile after engine/sort changes with safe margin
- Fix engine desync on tab navigation by initializing form engine from store

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

app/src/components/VoiceProfiles/ProfileCard.tsx

@@ -25,9 +25,10 @@ const ENGINE_DISPLAY_NAMES: Record<string, string> = {
 
 interface ProfileCardProps {
   profile: VoiceProfileResponse;
+  disabled?: boolean;
 }
 
-export function ProfileCard({ profile }: ProfileCardProps) {
+export function ProfileCard({ profile, disabled }: ProfileCardProps) {
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
   const deleteProfile = useDeleteProfile();
@@ -80,8 +81,9 @@ export function ProfileCard({ profile }: ProfileCardProps) {
     <>
       <Card
         className={cn(
-          'cursor-pointer hover:shadow-md transition-all flex flex-col h-[162px]',
-          isSelected && 'ring-2 ring-accent shadow-md',
+          'cursor-pointer transition-all flex flex-col h-[162px]',
+          disabled ? 'opacity-40 hover:opacity-60' : 'hover:shadow-md',
+          isSelected && !disabled && 'ring-2 ring-accent shadow-md',
         )}
         onClick={handleSelect}
         tabIndex={0}

app/src/components/VoiceProfiles/ProfileList.tsx

@@ -1,4 +1,5 @@
-import { Mic, Music, Sparkles } from 'lucide-react';
+import { Info, Mic, Sparkles } from 'lucide-react';
+import { useEffect, useRef } from 'react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { useProfiles } from '@/lib/hooks/useProfiles';
@@ -9,16 +10,28 @@ import { ProfileForm } from './ProfileForm';
 /** Engines that use preset (built-in) voices instead of cloned profiles. */
 const PRESET_ENGINES = new Set(['kokoro', 'qwen_custom_voice']);
 
-/** Human-readable engine names for empty state messages. */
-const ENGINE_NAMES: Record<string, string> = {
-  kokoro: 'Kokoro',
-  qwen_custom_voice: 'Qwen CustomVoice',
-};
-
 export function ProfileList() {
   const { data: profiles, isLoading, error } = useProfiles();
   const setDialogOpen = useUIStore((state) => state.setProfileDialogOpen);
   const selectedEngine = useUIStore((state) => state.selectedEngine);
+  const selectedProfileId = useUIStore((state) => state.selectedProfileId);
+  const cardRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+
+  // Scroll to the selected profile after engine/sort changes
+  useEffect(() => {
+    if (!selectedProfileId) return;
+    // Wait a frame for the DOM to update after re-sort
+    requestAnimationFrame(() => {
+      const el = cardRefs.current.get(selectedProfileId);
+      if (!el) return;
+
+      // Temporarily apply scroll-margin so it doesn't land flush at the top
+      el.style.scrollMarginTop = '180px';
+      el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+      // Clean up after scroll completes
+      setTimeout(() => { el.style.scrollMarginTop = ''; }, 500);
+    });
+  }, [selectedProfileId, selectedEngine]);
 
   if (isLoading) {
     return null;
@@ -35,10 +48,18 @@ export function ProfileList() {
   const allProfiles = profiles || [];
   const isPresetEngine = PRESET_ENGINES.has(selectedEngine);
 
-  // Filter profiles based on selected engine
-  const filteredProfiles = isPresetEngine
-    ? allProfiles.filter((p) => p.voice_type === 'preset' && p.preset_engine === selectedEngine)
-    : allProfiles.filter((p) => p.voice_type !== 'preset');
+  /** Whether a profile is supported by the currently selected engine. */
+  const isSupported = (p: (typeof allProfiles)[number]) =>
+    isPresetEngine
+      ? p.voice_type === 'preset' && p.preset_engine === selectedEngine
+      : p.voice_type !== 'preset';
+
+  // Sort so supported profiles come first
+  const sortedProfiles = [...allProfiles].sort(
+    (a, b) => (isSupported(a) ? 0 : 1) - (isSupported(b) ? 0 : 1),
+  );
+
+  const hasUnsupported = sortedProfiles.some((p) => !isSupported(p));
 
   return (
     <div className="flex flex-col">
@@ -56,29 +77,26 @@ export function ProfileList() {
               </Button>
             </CardContent>
           </Card>
-        ) : filteredProfiles.length === 0 && isPresetEngine ? (
-          <Card>
-            <CardContent className="flex flex-col items-center justify-center py-12">
-              <Music className="h-12 w-12 text-muted-foreground mb-4" />
-              <p className="text-muted-foreground mb-2">
-                No {ENGINE_NAMES[selectedEngine] ?? selectedEngine} voices created yet.
-              </p>
-              <p className="text-sm text-muted-foreground mb-4">
-                Create a profile to choose a specific voice before generating.
-              </p>
-              <Button onClick={() => setDialogOpen(true)}>
-                <Sparkles className="mr-2 h-4 w-4" />
-                Create {ENGINE_NAMES[selectedEngine] ?? selectedEngine} Voice
-              </Button>
-            </CardContent>
-          </Card>
         ) : (
           <div className="flex gap-4 overflow-x-auto p-1 pb-1 lg:grid lg:grid-cols-3 lg:auto-rows-auto lg:overflow-x-visible lg:pb-[150px]">
-            {filteredProfiles.map((profile) => (
-              <div key={profile.id} className="shrink-0 w-[200px] lg:w-auto lg:shrink">
-                <ProfileCard profile={profile} />
+            {sortedProfiles.map((profile) => (
+              <div
+                key={profile.id}
+                className="shrink-0 w-[200px] lg:w-auto lg:shrink"
+                ref={(el) => {
+                  if (el) cardRefs.current.set(profile.id, el);
+                  else cardRefs.current.delete(profile.id);
+                }}
+              >
+                <ProfileCard profile={profile} disabled={!isSupported(profile)} />
               </div>
             ))}
+            {hasUnsupported && (
+              <div className="col-span-full flex items-center gap-2 text-xs text-muted-foreground py-2">
+                <Info className="h-3.5 w-3.5 shrink-0" />
+                <span>Only supported voice profiles can be selected for the current model.</span>
+              </div>
+            )}
           </div>
         )}
       </div>