From b3e9e4aceb0ef8c470289c13f5faf3b6d3346427 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Fri, 27 Jan 2023 13:21:25 +0700
Subject: [PATCH 1/3] explore rollout on btn click

---
 .../fakeyou.com/src/scss/site-refresh.scss    |  17 +++
 .../tts/tts_model_list/TtsModelListPage.tsx   |  93 +++++++-----
 .../explore/ExploreVoicesModal.tsx            | 143 +++++-------------
 3 files changed, 116 insertions(+), 137 deletions(-)

diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss
index 7c8f830011..a76fe66c24 100644
--- a/packages/fakeyou.com/src/scss/site-refresh.scss
+++ b/packages/fakeyou.com/src/scss/site-refresh.scss
@@ -828,6 +828,23 @@ styles with important tags:
   .tippy-box[data-theme~="fakeyou"] > .tippy-svg-arrow {
     fill: lighten($secondary, 5%);
   }
+
+  .sliding-content {
+    overflow: hidden;
+    opacity: 0;
+    height: 0;
+    transition-property: none !important;
+    transition: all 0.05s !important;
+    transition-timing-function: ease !important;
+  }
+  .sliding-content.open {
+    overflow: visible;
+    opacity: 1;
+    height: 100%;
+    transition-property: none !important;
+    transition: all 0.2s !important;
+    transition-timing-function: ease !important;
+  }
 }
 
 select {
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
index 6f5e9a9df0..ca41cd5e7f 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
@@ -39,7 +39,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faArrowRight,
   faBarsStaggered,
-  faCompass,
+  faChevronDown,
+  faChevronUp,
   faDeleteLeft,
   faGlobe,
   faVolumeHigh,
@@ -64,11 +65,11 @@ import {
   AVAILABLE_TTS_LANGUAGE_CATEGORY_MAP,
   ENGLISH_LANGUAGE,
 } from "../../../../../_i18n/AvailableLanguageMap";
-import { ExploreVoicesModal } from "./explore/ExploreVoicesModal";
 import { WebUrl } from "../../../../../common/WebUrl";
 import { usePrefixedDocumentTitle } from "../../../../../common/UsePrefixedDocumentTitle";
 import { RatingButtons } from "../../../_common/ratings/RatingButtons";
 import { RatingStats } from "../../../_common/ratings/RatingStats";
+import { ExploreVoicesModal } from "./explore/ExploreVoicesModal";
 
 export interface EnqueueJobResponsePayload {
   success: boolean;
@@ -149,6 +150,14 @@ function TtsModelListPage(props: Props) {
     return () => clearTimeout(timeout);
   }, []);
 
+  const [isSliding, setIsSliding] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClick = () => {
+    setIsSliding(!isSliding);
+    setIsOpen(!isOpen);
+  };
+
   let {
     setTtsModels,
     setAllTtsCategories,
@@ -326,19 +335,19 @@ function TtsModelListPage(props: Props) {
         props.maybeSelectedTtsModel
           .ietf_primary_language_subtag as AvailableTtsLanguageKey
       ] || ENGLISH_LANGUAGE;
-    
+
     let ratingButtons = <></>;
     if (props.sessionWrapper.isLoggedIn()) {
       ratingButtons = (
-        <RatingButtons 
-          entity_type="tts_model" 
-          entity_token={maybeSelectedTtsModel?.model_token || ""} 
+        <RatingButtons
+          entity_type="tts_model"
+          entity_token={maybeSelectedTtsModel?.model_token || ""}
         />
       );
     }
 
     directViewLink = (
-      <div className="d-flex flex-column direct-view-link zi-2 mb-4">
+      <div className="d-flex flex-column direct-view-link mb-4">
         <div className="d-flex flex-column gap-3 flex-lg-row">
           <p className="flex-grow-1">
             {t("tts.TtsModelListPage.voiceDetails.voiceBy")}{" "}
@@ -384,11 +393,14 @@ function TtsModelListPage(props: Props) {
           {ratingButtons}
 
           <RatingStats
-            positive_votes={maybeSelectedTtsModel?.user_ratings?.positive_count || 0}
-            negative_votes={maybeSelectedTtsModel?.user_ratings?.negative_count || 0 }
+            positive_votes={
+              maybeSelectedTtsModel?.user_ratings?.positive_count || 0
+            }
+            negative_votes={
+              maybeSelectedTtsModel?.user_ratings?.negative_count || 0
+            }
             total_votes={maybeSelectedTtsModel?.user_ratings?.total_count || 0}
           />
-
         </div>
       </div>
     );
@@ -508,10 +520,10 @@ function TtsModelListPage(props: Props) {
           <div className="py-6">
             <div className="d-flex gap-4">
               <form
-                className="w-100 d-flex flex-column gap-4"
+                className="w-100 d-flex flex-column"
                 onSubmit={handleFormSubmit}
               >
-                <div>
+                <div className="pb-4">
                   <div className="d-flex gap-2">
                     <label className="sub-title">
                       {t("tts.TtsModelListPage.form.searchBarLabel")}
@@ -542,15 +554,17 @@ function TtsModelListPage(props: Props) {
                     </div>
 
                     <button
-                      onClick={() => {
-                        Analytics.ttsOpenExploreVoicesModal();
-                      }}
+                      onClick={handleClick}
+                      // onClick={() => {
+                      //   Analytics.ttsOpenExploreVoicesModal();
+                      // }}
                       className="btn btn-primary rounded-50"
-                      data-bs-toggle="modal"
-                      data-bs-target="#exploreModal"
                       type="button"
                     >
-                      <FontAwesomeIcon icon={faCompass} className="me-2" />
+                      <FontAwesomeIcon
+                        icon={isOpen ? faChevronUp : faChevronDown}
+                        className="me-2"
+                      />
                       {t(
                         "tts.TtsModelListPage.exploreModal.exploreModalOpenButton"
                       )}
@@ -559,23 +573,32 @@ function TtsModelListPage(props: Props) {
                 </div>
 
                 {/* Explore Modal */}
-                <ExploreVoicesModal
-                  allTtsCategories={props.allTtsCategories}
-                  allTtsModels={props.ttsModels}
-                  allTtsCategoriesByTokenMap={props.allTtsCategoriesByTokenMap}
-                  allTtsModelsByTokenMap={props.allTtsModelsByTokenMap}
-                  ttsModelsByCategoryToken={props.ttsModelsByCategoryToken}
-                  dropdownCategories={props.dropdownCategories}
-                  setDropdownCategories={props.setDropdownCategories}
-                  selectedCategories={props.selectedCategories}
-                  setSelectedCategories={props.setSelectedCategories}
-                  maybeSelectedTtsModel={props.maybeSelectedTtsModel}
-                  setMaybeSelectedTtsModel={props.setMaybeSelectedTtsModel}
-                  selectedTtsLanguageScope={props.selectedTtsLanguageScope}
-                  setSelectedTtsLanguageScope={
-                    props.setSelectedTtsLanguageScope
-                  }
-                />
+
+                <div
+                  className={`sliding-content ${
+                    isSliding ? "open pb-4 mt-2 mb-3" : "closed"
+                  }`}
+                >
+                  <ExploreVoicesModal
+                    allTtsCategories={props.allTtsCategories}
+                    allTtsModels={props.ttsModels}
+                    allTtsCategoriesByTokenMap={
+                      props.allTtsCategoriesByTokenMap
+                    }
+                    allTtsModelsByTokenMap={props.allTtsModelsByTokenMap}
+                    ttsModelsByCategoryToken={props.ttsModelsByCategoryToken}
+                    dropdownCategories={props.dropdownCategories}
+                    setDropdownCategories={props.setDropdownCategories}
+                    selectedCategories={props.selectedCategories}
+                    setSelectedCategories={props.setSelectedCategories}
+                    maybeSelectedTtsModel={props.maybeSelectedTtsModel}
+                    setMaybeSelectedTtsModel={props.setMaybeSelectedTtsModel}
+                    selectedTtsLanguageScope={props.selectedTtsLanguageScope}
+                    setSelectedTtsLanguageScope={
+                      props.setSelectedTtsLanguageScope
+                    }
+                  />
+                </div>
 
                 {directViewLink}
 
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ExploreVoicesModal.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ExploreVoicesModal.tsx
index 0380a35eb9..96435ece7d 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ExploreVoicesModal.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ExploreVoicesModal.tsx
@@ -1,15 +1,11 @@
 import React from "react";
-import {
-  faArrowRight,
-  faCompass,
-  faEraser,
-} from "@fortawesome/free-solid-svg-icons";
+import { faEraser } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { LanguageOptions } from "./LanguageOptions";
 import { TtsCategoryType } from "../../../../../../AppWrapper";
 import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels";
 import { CategoryOptions } from "./CategoryOptions";
-import { ScopedVoiceModelOptions } from "./ScopedVoiceModelOptions";
+// import { ScopedVoiceModelOptions } from "./ScopedVoiceModelOptions";
 import { t } from "i18next";
 
 interface Props {
@@ -90,106 +86,49 @@ export function ExploreVoicesModal(props: Props) {
   };
 
   return (
-    <div
-      className="modal fade"
-      id="exploreModal"
-      aria-labelledby="ModalLabel"
-      aria-hidden="true"
-    >
-      <div className="modal-dialog modal-xl modal-fullscreen-lg-down modal-dialog-centered">
-        <div className="modal-content">
-          <div className="modal-header p-3">
-            <h5 className="modal-title fw-semibold" id="ModalLabel">
-              <FontAwesomeIcon icon={faCompass} className="me-3" />
-              {t("tts.TtsModelListPage.exploreModal.exploreModalTitle")}
-            </h5>
+    <div>
+      <div className="row gx-3 gy-3">
+        <div className="col-12 col-lg-3 input-icon-search">
+          <label className="sub-title">
+            {t("tts.TtsModelListPage.exploreModal.languageLabel")}
+          </label>
+          <LanguageOptions
+            selectedTtsLanguageScope={props.selectedTtsLanguageScope}
+            setSelectedTtsLanguageScope={props.setSelectedTtsLanguageScope}
+          />
+        </div>
+
+        <div className="col-12 col-md-12 col-lg-9 input-icon-search">
+          <div className="d-flex align-items-start">
+            <label className="sub-title flex-grow-1">
+              {t("tts.TtsModelListPage.exploreModal.categoryLabel")}
+            </label>
             <button
-              type="button"
-              className="btn-close"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
-          </div>
-
-          <div className="modal-body p-3 p-lg-4">
-            <div className="row gx-3 gy-3">
-              <div className="col-12 col-lg-3 input-icon-search">
-                <label className="sub-title">
-                  {t("tts.TtsModelListPage.exploreModal.languageLabel")}
-                </label>
-                <LanguageOptions
-                  selectedTtsLanguageScope={props.selectedTtsLanguageScope}
-                  setSelectedTtsLanguageScope={
-                    props.setSelectedTtsLanguageScope
-                  }
-                />
-              </div>
-
-              <div className="col-12 col-md-12 col-lg-9 input-icon-search">
-                <div className="d-flex align-items-start">
-                  <label className="sub-title flex-grow-1">
-                    {t("tts.TtsModelListPage.exploreModal.categoryLabel")}
-                  </label>
-                  <button
-                    className="ms-3 fw-medium btn-link"
-                    onClick={() => {
-                      handleChangeCategory(0, "*");
-                    }}
-                  >
-                    <FontAwesomeIcon icon={faEraser} className="me-2" />
-                    {t("tts.TtsModelListPage.exploreModal.clearCategoryFilterButton")}
-                  </button>
-                </div>
-
-                <CategoryOptions
-                  allTtsCategories={props.allTtsCategories}
-                  allTtsModels={props.allTtsModels}
-                  allTtsCategoriesByTokenMap={props.allTtsCategoriesByTokenMap}
-                  allTtsModelsByTokenMap={props.allTtsModelsByTokenMap}
-                  ttsModelsByCategoryToken={props.ttsModelsByCategoryToken}
-                  dropdownCategories={props.dropdownCategories}
-                  setDropdownCategories={props.setDropdownCategories}
-                  selectedCategories={props.selectedCategories}
-                  setSelectedCategories={props.setSelectedCategories}
-                  maybeSelectedTtsModel={props.maybeSelectedTtsModel}
-                  setMaybeSelectedTtsModel={props.setMaybeSelectedTtsModel}
-                  handleChangeCategory={handleChangeCategory}
-                  selectedTtsLanguageScope={props.selectedTtsLanguageScope}
-                />
-              </div>
-            </div>
-
-            <br />
-
-            <div className="row gx-3 gy-3">
-              <ScopedVoiceModelOptions
-                allTtsCategories={props.allTtsCategories}
-                allTtsModels={props.allTtsModels}
-                allTtsCategoriesByTokenMap={props.allTtsCategoriesByTokenMap}
-                allTtsModelsByTokenMap={props.allTtsModelsByTokenMap}
-                ttsModelsByCategoryToken={props.ttsModelsByCategoryToken}
-                dropdownCategories={props.dropdownCategories}
-                selectedCategories={props.selectedCategories}
-                maybeSelectedTtsModel={props.maybeSelectedTtsModel}
-                setMaybeSelectedTtsModel={props.setMaybeSelectedTtsModel}
-                selectedTtsLanguageScope={props.selectedTtsLanguageScope}
-              />
-            </div>
-          </div>
-
-          <br />
-
-          <div className="p-4 w-100">
-            <button
-              type="button"
-              className="btn btn-primary w-100"
-              data-bs-dismiss="modal"
-              aria-label="Close"
+              className="ms-3 fw-medium btn-link"
+              onClick={() => {
+                handleChangeCategory(0, "*");
+              }}
             >
-              {t("tts.TtsModelListPage.exploreModal.useThisVoiceButton")}
-              <FontAwesomeIcon icon={faArrowRight} className="ms-2" />
+              <FontAwesomeIcon icon={faEraser} className="me-2" />
+              {t("tts.TtsModelListPage.exploreModal.clearCategoryFilterButton")}
             </button>
           </div>
+
+          <CategoryOptions
+            allTtsCategories={props.allTtsCategories}
+            allTtsModels={props.allTtsModels}
+            allTtsCategoriesByTokenMap={props.allTtsCategoriesByTokenMap}
+            allTtsModelsByTokenMap={props.allTtsModelsByTokenMap}
+            ttsModelsByCategoryToken={props.ttsModelsByCategoryToken}
+            dropdownCategories={props.dropdownCategories}
+            setDropdownCategories={props.setDropdownCategories}
+            selectedCategories={props.selectedCategories}
+            setSelectedCategories={props.setSelectedCategories}
+            maybeSelectedTtsModel={props.maybeSelectedTtsModel}
+            setMaybeSelectedTtsModel={props.setMaybeSelectedTtsModel}
+            handleChangeCategory={handleChangeCategory}
+            selectedTtsLanguageScope={props.selectedTtsLanguageScope}
+          />
         </div>
       </div>
     </div>

From ec4e5f77ca48b277120ab390c8745a4054a5fa10 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Fri, 27 Jan 2023 15:06:57 +0700
Subject: [PATCH 2/3] explore slide from top

---
 .../fakeyou.com/src/scss/site-refresh.scss    |   4 +-
 .../tts/tts_model_list/TtsModelListPage.tsx   | 109 +++++++++---------
 .../explore/ExploreVoicesModal.tsx            |  17 ++-
 .../explore/ScopedVoiceModelOptions.tsx       |  56 ++++-----
 4 files changed, 97 insertions(+), 89 deletions(-)

diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss
index a76fe66c24..93ddbd7244 100644
--- a/packages/fakeyou.com/src/scss/site-refresh.scss
+++ b/packages/fakeyou.com/src/scss/site-refresh.scss
@@ -834,7 +834,7 @@ styles with important tags:
     opacity: 0;
     height: 0;
     transition-property: none !important;
-    transition: all 0.05s !important;
+    transition: all 0.1s !important;
     transition-timing-function: ease !important;
   }
   .sliding-content.open {
@@ -842,7 +842,7 @@ styles with important tags:
     opacity: 1;
     height: 100%;
     transition-property: none !important;
-    transition: all 0.2s !important;
+    transition: all 0.4s !important;
     transition-timing-function: ease !important;
   }
 }
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
index ca41cd5e7f..fc53d53da1 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
@@ -150,11 +150,9 @@ function TtsModelListPage(props: Props) {
     return () => clearTimeout(timeout);
   }, []);
 
-  const [isSliding, setIsSliding] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
 
-  const handleClick = () => {
-    setIsSliding(!isSliding);
+  const handleClickExplore = () => {
     setIsOpen(!isOpen);
   };
 
@@ -523,60 +521,10 @@ function TtsModelListPage(props: Props) {
                 className="w-100 d-flex flex-column"
                 onSubmit={handleFormSubmit}
               >
-                <div className="pb-4">
-                  <div className="d-flex gap-2">
-                    <label className="sub-title">
-                      {t("tts.TtsModelListPage.form.searchBarLabel")}
-                    </label>
-                    {/*<a href="/" className="ms-1">
-                      <FontAwesomeIcon icon={faShuffle} />
-                    </a>*/}
-                  </div>
-
-                  <div className="d-flex flex-column flex-lg-row gap-3 ">
-                    <div className="flex-grow-1">
-                      <SelectSearch
-                        allTtsCategories={props.allTtsCategories}
-                        allTtsModels={props.ttsModels}
-                        allTtsModelsByTokenMap={props.allTtsModelsByTokenMap}
-                        dropdownCategories={props.dropdownCategories}
-                        setDropdownCategories={props.setDropdownCategories}
-                        selectedCategories={props.selectedCategories}
-                        setSelectedCategories={props.setSelectedCategories}
-                        maybeSelectedTtsModel={props.maybeSelectedTtsModel}
-                        setMaybeSelectedTtsModel={
-                          props.setMaybeSelectedTtsModel
-                        }
-                        selectedTtsLanguageScope={
-                          props.selectedTtsLanguageScope
-                        }
-                      />
-                    </div>
-
-                    <button
-                      onClick={handleClick}
-                      // onClick={() => {
-                      //   Analytics.ttsOpenExploreVoicesModal();
-                      // }}
-                      className="btn btn-primary rounded-50"
-                      type="button"
-                    >
-                      <FontAwesomeIcon
-                        icon={isOpen ? faChevronUp : faChevronDown}
-                        className="me-2"
-                      />
-                      {t(
-                        "tts.TtsModelListPage.exploreModal.exploreModalOpenButton"
-                      )}
-                    </button>
-                  </div>
-                </div>
-
-                {/* Explore Modal */}
-
+                {/* Explore Rollout */}
                 <div
                   className={`sliding-content ${
-                    isSliding ? "open pb-4 mt-2 mb-3" : "closed"
+                    isOpen ? "open pb-4" : "closed"
                   }`}
                 >
                   <ExploreVoicesModal
@@ -600,6 +548,57 @@ function TtsModelListPage(props: Props) {
                   />
                 </div>
 
+                <div className="pb-4">
+                  <div className="d-flex gap-2">
+                    <label className="sub-title">
+                      {t("tts.TtsModelListPage.form.searchBarLabel")}
+                    </label>
+                    {/*<a href="/" className="ms-1">
+                      <FontAwesomeIcon icon={faShuffle} />
+                    </a>*/}
+                  </div>
+
+                  <div className="d-flex flex-column flex-lg-row gap-3 zi-2">
+                    <div className="flex-grow-1">
+                      <SelectSearch
+                        allTtsCategories={props.allTtsCategories}
+                        allTtsModels={props.ttsModels}
+                        allTtsModelsByTokenMap={props.allTtsModelsByTokenMap}
+                        dropdownCategories={props.dropdownCategories}
+                        setDropdownCategories={props.setDropdownCategories}
+                        selectedCategories={props.selectedCategories}
+                        setSelectedCategories={props.setSelectedCategories}
+                        maybeSelectedTtsModel={props.maybeSelectedTtsModel}
+                        setMaybeSelectedTtsModel={
+                          props.setMaybeSelectedTtsModel
+                        }
+                        selectedTtsLanguageScope={
+                          props.selectedTtsLanguageScope
+                        }
+                      />
+                    </div>
+
+                    {}
+
+                    <button
+                      onClick={handleClickExplore}
+                      // onClick={() => {
+                      //   Analytics.ttsOpenExploreVoicesModal();
+                      // }}
+                      className="btn btn-primary rounded-50"
+                      type="button"
+                    >
+                      <FontAwesomeIcon
+                        icon={isOpen ? faChevronUp : faChevronDown}
+                        className="me-2"
+                      />
+                      {t(
+                        "tts.TtsModelListPage.exploreModal.exploreModalOpenButton"
+                      )}
+                    </button>
+                  </div>
+                </div>
+
                 {directViewLink}
 
                 <div className="row gx-5 gy-5">
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ExploreVoicesModal.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ExploreVoicesModal.tsx
index 96435ece7d..f7b65e8895 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ExploreVoicesModal.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ExploreVoicesModal.tsx
@@ -5,7 +5,7 @@ import { LanguageOptions } from "./LanguageOptions";
 import { TtsCategoryType } from "../../../../../../AppWrapper";
 import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels";
 import { CategoryOptions } from "./CategoryOptions";
-// import { ScopedVoiceModelOptions } from "./ScopedVoiceModelOptions";
+import { ScopedVoiceModelOptions } from "./ScopedVoiceModelOptions";
 import { t } from "i18next";
 
 interface Props {
@@ -108,6 +108,7 @@ export function ExploreVoicesModal(props: Props) {
               onClick={() => {
                 handleChangeCategory(0, "*");
               }}
+              type="button"
             >
               <FontAwesomeIcon icon={faEraser} className="me-2" />
               {t("tts.TtsModelListPage.exploreModal.clearCategoryFilterButton")}
@@ -131,6 +132,20 @@ export function ExploreVoicesModal(props: Props) {
           />
         </div>
       </div>
+      <div className="mt-4">
+        <ScopedVoiceModelOptions
+          allTtsCategories={props.allTtsCategories}
+          allTtsModels={props.allTtsModels}
+          allTtsCategoriesByTokenMap={props.allTtsCategoriesByTokenMap}
+          allTtsModelsByTokenMap={props.allTtsModelsByTokenMap}
+          ttsModelsByCategoryToken={props.ttsModelsByCategoryToken}
+          dropdownCategories={props.dropdownCategories}
+          selectedCategories={props.selectedCategories}
+          maybeSelectedTtsModel={props.maybeSelectedTtsModel}
+          setMaybeSelectedTtsModel={props.setMaybeSelectedTtsModel}
+          selectedTtsLanguageScope={props.selectedTtsLanguageScope}
+        />
+      </div>
     </div>
   );
 }
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ScopedVoiceModelOptions.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ScopedVoiceModelOptions.tsx
index dba46c64c1..3ec51bc858 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ScopedVoiceModelOptions.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ScopedVoiceModelOptions.tsx
@@ -1,8 +1,6 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faMicrophone,
-} from "@fortawesome/free-solid-svg-icons";
+import { faMicrophone } from "@fortawesome/free-solid-svg-icons";
 import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels";
 import { TtsCategoryType } from "../../../../../../AppWrapper";
 import { Trans } from "react-i18next";
@@ -25,7 +23,7 @@ interface Props {
   maybeSelectedTtsModel?: TtsModelListItem;
   setMaybeSelectedTtsModel: (maybeSelectedTtsModel: TtsModelListItem) => void;
 
-  selectedTtsLanguageScope: string,
+  selectedTtsLanguageScope: string;
 }
 
 export function ScopedVoiceModelOptions(props: Props) {
@@ -44,17 +42,16 @@ export function ScopedVoiceModelOptions(props: Props) {
     if (maybeNewTtsModel !== undefined) {
       props.setMaybeSelectedTtsModel(maybeNewTtsModel);
     }
-  }
+  };
 
   const leafiestCategory = selectedCategories[selectedCategories.length - 1];
 
   let leafiestCategoryModels: Array<TtsModelListItem> = [];
 
   if (leafiestCategory !== undefined) {
-    leafiestCategoryModels =
-      Array.from(
-        ttsModelsByCategoryToken.get(leafiestCategory.category_token) || 
-          new Set());
+    leafiestCategoryModels = Array.from(
+      ttsModelsByCategoryToken.get(leafiestCategory.category_token) || new Set()
+    );
   } else {
     leafiestCategoryModels = Array.from(new Set(allTtsModels));
   }
@@ -65,16 +62,20 @@ export function ScopedVoiceModelOptions(props: Props) {
       if (props.selectedTtsLanguageScope === "*") {
         return true; // NB: Sentinel value of "*" means all languages.
       }
-      return ttsModel.ietf_primary_language_subtag === props.selectedTtsLanguageScope;
+      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);
+  let selectedOption = options.find(
+    (option) => option.value === maybeSelectedTtsModel?.model_token
+  );
 
   if (selectedOption === undefined && options.length > 0) {
     // NB: We shouldn't select the first item in the list since that won't update the currently
@@ -84,9 +85,9 @@ export function ScopedVoiceModelOptions(props: Props) {
     selectedOption = {
       label: "Select voice...",
       value: "*",
-    }
+    };
   }
- 
+
   const voiceCount = options.length;
 
   let isLoading = false;
@@ -101,27 +102,18 @@ export function ScopedVoiceModelOptions(props: Props) {
     selectedOption = {
       label: "Loading...",
       value: "*",
-    }
+    };
   } else if (options.length === 0) {
     // NB: Perhaps the user has refined their search to be too narrow (langauge + category)
     selectedOption = {
       label: "No results (remove some filters)",
       value: "*",
-    }
+    };
   }
 
   return (
     <>
       <div className="col">
-        <label className="sub-title">
-          <Trans
-            i18nKey="tts.TtsModelListPage.form.voicesLabel"
-            count={voiceCount}
-          >
-            Voice ({voiceCount} to choose from)
-          </Trans>
-        </label>
-
         <div className="input-icon-search">
           <span className="form-control-feedback">
             <FontAwesomeIcon icon={faMicrophone} />
@@ -132,18 +124,20 @@ export function ScopedVoiceModelOptions(props: Props) {
             options={options}
             classNames={SearchFieldClass}
             onChange={handleChange}
-            onMenuOpen={() => { Analytics.ttsOpenScopedVoiceSelectMenu() } }
+            onMenuOpen={() => {
+              Analytics.ttsOpenScopedVoiceSelectMenu();
+            }}
             isLoading={isLoading}
             // On mobile, we don't want the onscreen keyboard to take up half the UI.
             autoFocus={false}
             isSearchable={false}
-            // NB: The following settings improve upon performance. 
+            // NB: The following settings improve upon performance.
             // See: https://github.com/JedWatson/react-select/issues/3128
-            filterOption={createFilter({ignoreAccents: false})}
-            components={{Option: FastReactSelectOption} as any}
-            />
+            filterOption={createFilter({ ignoreAccents: false })}
+            components={{ Option: FastReactSelectOption } as any}
+          />
         </div>
       </div>
     </>
-  )
+  );
 }

From c05b38167b0184ec4263fc7ef7020193bd8d1a18 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Fri, 27 Jan 2023 15:08:45 +0700
Subject: [PATCH 3/3] label

---
 .../tts_model_list/explore/ScopedVoiceModelOptions.tsx   | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ScopedVoiceModelOptions.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ScopedVoiceModelOptions.tsx
index 3ec51bc858..385a82fc40 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ScopedVoiceModelOptions.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/explore/ScopedVoiceModelOptions.tsx
@@ -114,6 +114,15 @@ export function ScopedVoiceModelOptions(props: Props) {
   return (
     <>
       <div className="col">
+        <label className="sub-title">
+          <Trans
+            i18nKey="tts.TtsModelListPage.form.voicesLabel"
+            count={voiceCount}
+          >
+            Voice ({voiceCount} to choose from)
+          </Trans>
+        </label>
+
         <div className="input-icon-search">
           <span className="form-control-feedback">
             <FontAwesomeIcon icon={faMicrophone} />