fix: voice cards clickable - select cloned voice as narrator

- Add onclick JS to voice cards to set voice_selector
- Add hidden voice_selector textbox + change handler
- Store profile_id in voice list when saving cloned voice
- Map card click → voice_profile_state update

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

app.py

@@ -347,9 +347,21 @@ def render_cloned_voices_html(voices_list):
         status_bg = "#f0fdf4" if v["status"] == "ready" else "#fef3c7"
         safe_name = html.escape(v['name'])
         safe_desc = html.escape(v['description'])
+        voice_id = html.escape(v.get('profile_id', v['id']))
+
+        onclick = f"""onclick="
+            const sel = document.querySelector('#voice_selector textarea, #voice_selector input');
+            if (sel) {{
+                sel.value = '{voice_id}';
+                sel.dispatchEvent(new Event('input', {{bubbles: true}}));
+                sel.dispatchEvent(new Event('change', {{bubbles: true}}));
+            }}
+            document.querySelectorAll('.voice-card-selected').forEach(c => c.classList.remove('voice-card-selected'));
+            this.classList.add('voice-card-selected');
+        " """
 
         markup += f"""
-        <div class="shelf-card" style="align-items: center;">
+        <div class="shelf-card" style="align-items: center; cursor: pointer;" {onclick}>
             <div style="width: 48px; height: 48px; border-radius: 50%; background: #ede8e3; border: 1px solid #ddc1b0; font-size: 24px; display: flex; align-items: center; justify-content: center; shrink-0: 0;">
                 {v['avatar_url']}
             </div>
@@ -586,9 +598,11 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
             gr.HTML("""
                 <div style="margin-top: 32px; border-top: 1px solid #ebdccb; padding-top: 24px;">
                     <h4 class="serif-header" style="font-size: 18px; margin-bottom: 16px;">Currently Available Voices</h4>
+                    <p style="font-size: 11px; color: #6f6257; margin-bottom: 12px;">Click a voice card to select it as the narrator.</p>
                 </div>
             """)
             cloned_voices_list_grid = gr.HTML(value=render_cloned_voices_html(mock_voices))
+            voice_selector = gr.Textbox(visible=False, elem_id="voice_selector")
 
         # TAB 4: Profile
         with gr.TabItem("⚙️ Profile") as profile_tab:
@@ -803,7 +817,7 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
     )
 
     # 4. Add cloned voice to inventory
-    def save_new_cloned_voice(v_name, v_gender, list_voices):
+    def save_new_cloned_voice(v_name, v_gender, list_voices, current_profile_id):
         avatar = "👩" if v_gender == "Female" else "👨"
         new_voice_item = {
             "id": f"v-{time.time()}",
@@ -812,7 +826,8 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
             "description": f"Custom cloned {v_gender.lower()} companion voice. Highly optimized.",
             "gender": v_gender,
             "created_date": "2026-06-06",
-            "status": "ready"
+            "status": "ready",
+            "profile_id": current_profile_id,
         }
         updated = [new_voice_item] + list_voices
         return (
@@ -827,10 +842,34 @@ with gr.Blocks(title="MomsVoice", css=css_code) as demo:
 
     add_to_library_btn.click(
         save_new_cloned_voice,
-        inputs=[new_voice_name, new_voice_gender, voices_state],
+        inputs=[new_voice_name, new_voice_gender, voices_state, voice_profile_state],
         outputs=[voices_state, cloned_voices_list_grid, cloning_progress_msg, voice_cloning_success_panel, voice_sample_preview_widget, add_to_library_btn, new_voice_name]
     )
 
+    # Voice card selection — update voice_profile_state when a card is clicked
+    def handle_voice_select(selected_id, voices):
+        """Map selected voice ID to profile_id for TTS."""
+        if not selected_id:
+            return gr.update()
+        # Check if it matches a saved profile ID directly
+        from voice_clone import has_profile
+        if has_profile(selected_id):
+            return selected_id
+        # Check if it matches a voice in the list with a profile_id
+        for v in voices:
+            if v.get('profile_id') == selected_id or v.get('id') == selected_id:
+                pid = v.get('profile_id')
+                if pid and has_profile(pid):
+                    return pid
+        # No valid profile — use stock voice (None)
+        return None
+
+    voice_selector.change(
+        handle_voice_select,
+        inputs=[voice_selector, voices_state],
+        outputs=[voice_profile_state]
+    )
+
     # 5. Play button — streams TTS audio chunk by chunk
     def stream_tts(tts_chunks, paras, profile_id):
         _status_playing = """