Rename voices, unique designed voice filenames, hide presets from Your Voices

index.html

@@ -1284,15 +1284,17 @@ async function renderSidebarVoices() {
 async function renderVoicesPage() {
   const voices = await getVoices();
   const grid = document.getElementById("voices-grid");
-  grid.innerHTML = voices.map(v => {
+  grid.innerHTML = voices.filter(v => !v.isPreset).map(v => {
     const date = new Date(v.createdAt).toLocaleDateString();
+    const escaped = v.name.replace(/'/g, "\\'").replace(/"/g, """);
     return `<div class="voice-tile">
       <div class="voice-tile-date">${date}</div>
       <div class="voice-tile-avatar" style="background:${v.color}">${v.name[0].toUpperCase()}</div>
-      <div class="voice-tile-name">${v.name}</div>
+      <div class="voice-tile-name" id="vname-${v.id}">${v.name}</div>
       <div class="voice-tile-file">${v.fileName}</div>
       <div class="voice-tile-actions">
         <button class="voice-tile-btn use" onclick="selectVoiceAndGo('${v.id}')">Use Voice</button>
+        <button class="voice-tile-btn del" style="background:transparent;color:var(--text-muted);border:1px solid var(--border)" onclick="renameVoice('${v.id}','${escaped}')">Rename</button>
         <button class="voice-tile-btn del" onclick="deleteVoiceFromPage('${v.id}')">Remove</button>
       </div>
     </div>`;
@@ -1326,6 +1328,19 @@ window.deleteVoice = async function(id) {
 
 window.deleteVoiceFromPage = window.deleteVoice;
 
+window.renameVoice = async function(id, currentName) {
+  const newName = prompt("Rename voice:", currentName);
+  if (!newName || newName.trim() === "" || newName.trim() === currentName) return;
+  const voices = await getVoices();
+  const voice = voices.find(v => v.id === id);
+  if (!voice) return;
+  voice.name = newName.trim();
+  await putVoice(voice);
+  if (selectedVoice?.id === id) { selectedVoice = voice; updateVoiceSelector(); }
+  renderSidebarVoices();
+  renderVoicesPage();
+};
+
 function updateVoiceSelector() {
   const avatar = document.getElementById("sel-voice-avatar");
   const name = document.getElementById("sel-voice-name");
@@ -1730,7 +1745,7 @@ window.saveDesignVoice = async function() {
     const voice = {
       id: crypto.randomUUID(),
       name,
-      fileName: "designed_voice.wav",
+      fileName: `designed_voice_${Date.now()}.wav`,
       audioData: data,
       audioType: "audio/wav",
       color: COLORS[Math.floor(Math.random() * COLORS.length)],