filter voices in "explore" by language

packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/CategoryOptions.tsx

@@ -28,6 +28,8 @@ interface Props {
   setMaybeSelectedTtsModel: (maybeSelectedTtsModel: TtsModelListItem) => void;
 
   handleChangeCategory: (level: number, maybeToken?: string) => void;
+
+  selectedTtsLanguageScope: string,
 }
 
 export function CategoryOptions(props: Props) {
@@ -72,6 +74,8 @@ export function CategoryOptions(props: Props) {
   );
 }
 
+// ========= Build dropdowns ========
+
 function buildDropdowns(
   dropdownCategories: TtsCategoryType[][], 
   selectedCategories: TtsCategoryType[], 

packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/ExploreVoicesModal.tsx

@@ -147,6 +147,7 @@ export function ExploreVoicesModal(props: Props) {
                   maybeSelectedTtsModel={props.maybeSelectedTtsModel}
                   setMaybeSelectedTtsModel={props.setMaybeSelectedTtsModel}
                   handleChangeCategory={handleChangeCategory}
+                  selectedTtsLanguageScope={props.selectedTtsLanguageScope}
                 />
               </div>
             </div>
@@ -164,6 +165,7 @@ export function ExploreVoicesModal(props: Props) {
                 selectedCategories={props.selectedCategories}
                 maybeSelectedTtsModel={props.maybeSelectedTtsModel}
                 setMaybeSelectedTtsModel={props.setMaybeSelectedTtsModel}
+                selectedTtsLanguageScope={props.selectedTtsLanguageScope}
               />
             </div>
           </div>

packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/ScopedVoiceModelOptions.tsx

@@ -25,6 +25,8 @@ interface Props {
 
   maybeSelectedTtsModel?: TtsModelListItem;
   setMaybeSelectedTtsModel: (maybeSelectedTtsModel: TtsModelListItem) => void;
+
+  selectedTtsLanguageScope: string,
 }
 
 export function ScopedVoiceModelOptions(props: Props) {
@@ -40,12 +42,9 @@ export function ScopedVoiceModelOptions(props: Props) {
   const handleChange = (option: any, actionMeta: any) => {
     const ttsModelToken = option?.value;
     const maybeNewTtsModel = props.allTtsModelsByTokenMap.get(ttsModelToken);
-
-    if (maybeNewTtsModel === undefined) {
-      return;
+    if (maybeNewTtsModel !== undefined) {
+      props.setMaybeSelectedTtsModel(maybeNewTtsModel);
     }
-
-    props.setMaybeSelectedTtsModel(maybeNewTtsModel);
   }
 
   const leafiestCategory = selectedCategories[selectedCategories.length - 1];
@@ -61,12 +60,20 @@ export function ScopedVoiceModelOptions(props: Props) {
     leafiestCategoryModels = Array.from(new Set(allTtsModels));
   }
 
-  let options = leafiestCategoryModels.map((ttsModel) => {
-    return {
-      label: ttsModel.title,
-      value: ttsModel.model_token,
-    }
-  });
+  let options = leafiestCategoryModels
+    .filter((ttsModel) => {
+      // Scope to currently selected language
+      if (props.selectedTtsLanguageScope === "*") {
+        return true; // NB: Sentinel value of "*" means all languages.
+      }
+      return ttsModel.ietf_primary_language_subtag === props.selectedTtsLanguageScope;
+    })
+    .map((ttsModel) => {
+      return {
+        label: ttsModel.title,
+        value: ttsModel.model_token,
+      }
+    });
 
   let selectedOption = options.find((option) => option.value === maybeSelectedTtsModel?.model_token);
 
@@ -74,7 +81,7 @@ export function ScopedVoiceModelOptions(props: Props) {
     selectedOption = options[0];
   }
  
-  const voiceCount = leafiestCategoryModels.length;
+  const voiceCount = options.length;
 
   let isLoading = false;
 

packages/fakeyou.com/src/v2/view/tts/tts_model_list/search/SelectSearch.tsx

@@ -40,9 +40,9 @@ export function SelectSearch(props: Props) {
 
   const options : any = props.allTtsModels
     .filter((ttsModel) => {
+      // Scope to currently selected language
       if (props.selectedTtsLanguageScope === "*") {
-        // NB: Sentinel value of "*" means all languages.
-        return true;
+        return true; // NB: Sentinel value of "*" means all languages.
       }
       return ttsModel.ietf_primary_language_subtag === props.selectedTtsLanguageScope;
     })