fix: Hide toolbar buttons until a translation is provided

neet · Jan 18, 2025 · e7dcc27 · e7dcc27
1 parent 47a45ee
commit e7dcc27
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/src/components/Composer/Composer.tsx b/src/components/Composer/Composer.tsx
@@ -224,8 +224,8 @@ export const Composer: FC<ComposerProps> = (props) => {
           count={count}
           pending={pending}
           source={source}
-          ready={ready}
           dirty={dirty}
+          hasTranslation={ready}
           textareaRef={textareaRef}
           onChangeSource={handleChangeSource}
           onChangeText={handleChangeText}
@@ -239,8 +239,8 @@ export const Composer: FC<ComposerProps> = (props) => {
           translationTranscription={translationTranscription}
           dirty={dirty}
           pending={pending}
-          ready={ready}
           target={target}
+          hasTranslation={ready}
           onChangeTarget={handleChangeTarget}
           onPlayOutput={handlePlayOutput}
           onCopy={handleCopy}

diff --git a/src/components/Composer/ComposerInput.tsx b/src/components/Composer/ComposerInput.tsx
@@ -31,7 +31,7 @@ export type ComposerInputProps = {
     dialect?: string;
   };
   pending: boolean;
-  ready: boolean;
+  hasTranslation: boolean;
   dirty: boolean;
   textTranscription?: t.Transcription;
   count: number;
@@ -47,7 +47,7 @@ export const ComposerInput: FC<ComposerInputProps> = (props) => {
   const {
     source,
     defaultValues,
-    ready,
+    hasTranslation,
     dirty,
     pending,
     textTranscription,
@@ -124,7 +124,7 @@ export const ComposerInput: FC<ComposerInputProps> = (props) => {
           </Text>
 
           <Transcription>
-            {!dirty && ready && textTranscription
+            {!dirty && hasTranslation && textTranscription
               ? textTranscription.text
               : undefined}
           </Transcription>
@@ -147,11 +147,13 @@ export const ComposerInput: FC<ComposerInputProps> = (props) => {
             <Tooltip content={t("play")}>
               <IconButton
                 variant="soft"
-                hidden={count <= 0}
                 size="2"
                 onClick={onPlayInput}
                 type="button"
                 title={t("play")}
+                style={{
+                  visibility: count > 0 ? "visible" : "hidden",
+                }}
               >
                 <FiVolume2 aria-hidden />
               </IconButton>

diff --git a/src/components/Composer/ComposerOutput.tsx b/src/components/Composer/ComposerOutput.tsx
@@ -28,7 +28,7 @@ import { Transcription } from "./Transcription";
 import { Translation } from "./Translation";
 
 export type ComposerOutputProps = {
-  ready: boolean;
+  hasTranslation: boolean;
   dirty: boolean;
   target: string;
   pending: boolean;
@@ -47,7 +47,7 @@ export type ComposerOutputProps = {
 
 export const ComposerOutput: FC<ComposerOutputProps> = (props) => {
   const {
-    ready,
+    hasTranslation,
     dirty,
     pending,
     target,
@@ -104,7 +104,7 @@ export const ComposerOutput: FC<ComposerOutputProps> = (props) => {
             </Text>
 
             <Transcription>
-              {ready && translationTranscription
+              {hasTranslation && translationTranscription
                 ? translationTranscription.text
                 : undefined}
             </Transcription>
@@ -113,12 +113,14 @@ export const ComposerOutput: FC<ComposerOutputProps> = (props) => {
           <Flex justify="between" mt="2">
             <Tooltip content={t("play")}>
               <IconButton
-                hidden={!ready}
                 type="button"
                 variant="soft"
                 size="2"
                 aria-label={t("play")}
                 onClick={onPlayOutput}
+                style={{
+                  visibility: hasTranslation ? "visible" : "hidden",
+                }}
               >
                 <FiVolume2 aria-hidden />
               </IconButton>
@@ -127,25 +129,29 @@ export const ComposerOutput: FC<ComposerOutputProps> = (props) => {
             <Flex justify="end" gap="1">
               <Tooltip content={t("share")}>
                 <IconButton
-                  hidden={!ready}
                   type="button"
                   variant="soft"
                   size="2"
                   aria-label={t("share")}
                   onClick={onShare}
+                  style={{
+                    visibility: hasTranslation ? "visible" : "hidden",
+                  }}
                 >
                   <FiShare aria-hidden />
                 </IconButton>
               </Tooltip>
 
               <Tooltip content={t("copy")}>
                 <IconButton
-                  hidden={!ready}
                   type="button"
                   variant="soft"
                   size="2"
                   aria-label={t("copy")}
                   onClick={onCopy}
+                  style={{
+                    visibility: hasTranslation ? "visible" : "hidden",
+                  }}
                 >
                   <FiCopy aria-hidden />
                 </IconButton>
@@ -184,20 +190,20 @@ export const ComposerOutput: FC<ComposerOutputProps> = (props) => {
           </Callout.Root>
         )}
 
-        {ready && (
+        {hasTranslation && (
           <Box>
             <Disclaimer />
           </Box>
         )}
       </Flex>
 
-      {ready && (
+      {hasTranslation && (
         <ExampleSentences
           exampleSentencesPromise={props.exampleSentencesPromise}
         />
       )}
 
-      {ready && (
+      {hasTranslation && (
         <AlternativeTranslations
           alternativeTranslationsPromise={props.alternativeTranslationsPromise}
         />