From 773420d04e81ddcfa3f3fccb04faf14a7dfba99f Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Wed, 31 Jul 2024 22:28:52 +0700
Subject: [PATCH] separate selected voice and search

---
 .../src/v2/view/pages/dev_tts/DevTTS.scss     |  2 +-
 .../src/v2/view/pages/dev_tts/DevTTS.tsx      | 53 ++++++++++---------
 .../v2/view/pages/dev_tts/FeaturedVoice.tsx   |  8 +--
 3 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.scss b/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.scss
index e7fa9785bc..91d681a2ca 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.scss
+++ b/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.scss
@@ -47,7 +47,7 @@
 }
 
 .fy-weight-picker-preview {
-  border-radius: 0 0 0.5rem 0.5rem;
+  border-radius: 0.5rem;
   padding: 0.75rem;
   background-color: rgba($action, 0.8);
   border: 2px solid lighten($action, 12%);
diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.tsx
index 63fe7e339e..1ad1e2e53a 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.tsx
+++ b/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.tsx
@@ -16,7 +16,6 @@ import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faArrowRight,
-  faBell,
   faChevronRight,
   faDeleteLeft,
   faSearch,
@@ -175,6 +174,30 @@ export default function DevTTS({ sessionSubscriptionsWrapper }: Props) {
               </div>
             </div>
 
+            <div className="position-relative">
+              <Label label="Search for a Voice" />
+              <Input
+                autoFocus={isMobile ? false : selectedVoice ? false : true}
+                icon={faSearch}
+                placeholder={"Search from 3500+ voices"}
+                onChange={searchChange()}
+                value={search}
+              />
+              {search && (
+                <FontAwesomeIcon
+                  icon={faXmark}
+                  className="position-absolute opacity-75 fs-5"
+                  style={{
+                    right: "1rem",
+                    top: "50%",
+                    transform: "translateY(-50%)",
+                    cursor: "pointer",
+                  }}
+                  onClick={() => searchSet("")}
+                />
+              )}
+            </div>
+
             <div>
               <div className="d-flex align-items-center">
                 {!selectedVoice && (
@@ -192,7 +215,8 @@ export default function DevTTS({ sessionSubscriptionsWrapper }: Props) {
                     />
                   </div>
 
-                  <div className="d-flex gap-2">
+                  {/* Commented out notify voice improvement for now */}
+                  {/* <div className="d-flex gap-2">
                     {selectedVoice && (
                       <Button
                         icon={faBell}
@@ -201,33 +225,10 @@ export default function DevTTS({ sessionSubscriptionsWrapper }: Props) {
                         className="fs-7"
                       />
                     )}
-                  </div>
+                  </div> */}
                 </div>
               </div>
 
-              <div className="position-relative">
-                <Input
-                  autoFocus={isMobile ? false : selectedVoice ? false : true}
-                  icon={faSearch}
-                  placeholder={"Search from 3000+ voices"}
-                  onChange={searchChange()}
-                  value={search}
-                  style={{ borderRadius: "0.5rem 0.5rem 0 0" }}
-                />
-                {search && (
-                  <FontAwesomeIcon
-                    icon={faXmark}
-                    className="position-absolute opacity-75 fs-5"
-                    style={{
-                      right: "1rem",
-                      top: "50%",
-                      transform: "translateY(-50%)",
-                      cursor: "pointer",
-                    }}
-                    onClick={() => searchSet("")}
-                  />
-                )}
-              </div>
               <div className="fy-weight-picker-preview" onClick={openModal}>
                 <WeightCoverImage
                   {...{
diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/FeaturedVoice.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/FeaturedVoice.tsx
index 85eb4667e7..2f9afa14b4 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/FeaturedVoice.tsx
+++ b/src/website/packages/fakeyou.com/src/v2/view/pages/dev_tts/FeaturedVoice.tsx
@@ -6,7 +6,6 @@ import { CardBadge } from "components/entities";
 import { useWeightFetch } from "hooks";
 import useWeightTypeInfo from "hooks/useWeightTypeInfo";
 import React, { useState } from "react";
-import { Link } from "react-router-dom";
 
 interface FeaturedVoiceProps {
   token: string;
@@ -60,11 +59,8 @@ export const FeaturedVoice = ({ token, onClick }: FeaturedVoiceProps) => {
                   small={true}
                 />
               </h6>
-              <span className="fs-7 fw-medium">
-                by{" "}
-                <Link to={`/profile/${weight?.creator.display_name}`}>
-                  {weight?.creator.display_name}
-                </Link>
+              <span className="fs-7 fw-medium" style={{ opacity: 0.6 }}>
+                by {weight?.creator.display_name}
               </span>
             </div>
             <div