From a85ac53ba1b479365d3d948ec6a2aa2b5273331b Mon Sep 17 00:00:00 2001
From: Stephanie Gredell <s.raide@gmail.com>
Date: Thu, 11 Dec 2025 15:36:09 -0800
Subject: [PATCH] add clear sounds button

---
 frontend/src/pages/SpeechSoundsAdminPage.tsx | 42 ++++++++++++++++++++
 frontend/src/services/apiClient.ts           |  5 +++
 2 files changed, 47 insertions(+)

diff --git a/frontend/src/pages/SpeechSoundsAdminPage.tsx b/frontend/src/pages/SpeechSoundsAdminPage.tsx
index 2938a78..134aabd 100644
--- a/frontend/src/pages/SpeechSoundsAdminPage.tsx
+++ b/frontend/src/pages/SpeechSoundsAdminPage.tsx
@@ -1,7 +1,31 @@
+import { useState } from 'react';
 import { WordGroupManager } from '../components/WordGroupManager/WordGroupManager';
 import { Link } from 'react-router-dom';
+import { speechSoundsApi } from '../services/apiClient';
 
 export function SpeechSoundsAdminPage() {
+  const [clearingCache, setClearingCache] = useState(false);
+  const [cacheMessage, setCacheMessage] = useState<string | null>(null);
+
+  const handleClearCache = async () => {
+    if (!confirm('Are you sure you want to clear all cached pronunciations? Words will regenerate with new settings on next play.')) {
+      return;
+    }
+
+    try {
+      setClearingCache(true);
+      setCacheMessage(null);
+      await speechSoundsApi.clearPronunciationsCache();
+      setCacheMessage('Pronunciation cache cleared successfully!');
+      setTimeout(() => setCacheMessage(null), 3000);
+    } catch (err: any) {
+      setCacheMessage(err.error?.message || 'Failed to clear cache');
+      setTimeout(() => setCacheMessage(null), 5000);
+    } finally {
+      setClearingCache(false);
+    }
+  };
+
   return (
     <div className="min-h-[calc(100vh-60px)] bg-background">
       <div className="bg-card border-b border-border py-8 px-6 text-center">
@@ -15,6 +39,24 @@ export function SpeechSoundsAdminPage() {
         <p className="m-0 text-sm text-muted-foreground">Manage word groups for speech sound practice</p>
       </div>
       <div className="max-w-[1200px] mx-auto p-6">
+        <div className="mb-6 flex justify-end">
+          <button
+            onClick={handleClearCache}
+            disabled={clearingCache}
+            className="px-4 py-2 bg-[#ef4444] text-white rounded-full font-semibold text-sm hover:bg-[#dc2626] transition-all active:scale-95 shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {clearingCache ? 'Clearing...' : 'Clear Pronunciation Cache'}
+          </button>
+        </div>
+        {cacheMessage && (
+          <div className={`mb-4 p-4 rounded-lg border ${
+            cacheMessage.includes('successfully') 
+              ? 'bg-green-50 border-green-200 text-green-800' 
+              : 'bg-destructive/10 border-destructive/20 text-destructive'
+          }`}>
+            {cacheMessage}
+          </div>
+        )}
         <WordGroupManager />
       </div>
     </div>
diff --git a/frontend/src/services/apiClient.ts b/frontend/src/services/apiClient.ts
index e2b2e6a..276c8e9 100644
--- a/frontend/src/services/apiClient.ts
+++ b/frontend/src/services/apiClient.ts
@@ -196,3 +196,8 @@ export const magicCodeApi = {
   getSettingsByCode: (code: string) => api.get(`/magic-code/${code}`)
 };
 
+// Speech Sounds API (admin only)
+export const speechSoundsApi = {
+  clearPronunciationsCache: () => api.delete('/speech-sounds/cache')
+};
+