Hide TTS health via opacity when sufficiently high

src/js/chat/TtsHealth.tsx

@@ -41,17 +41,18 @@ export const TtsHealth: FC<TtsHealthProps> = ({ token }) => {
         return { maxChars, usedChars };
     }, [subscriptionData]);
 
+    const ttsUsedPercent = limits.maxChars > 0 ? limits.usedChars / limits.maxChars : 1;
     const charsAvailable = limits.maxChars - limits.usedChars;
-    const progressBarStyle = useMemo(() => ({ width: limits.maxChars > 0 ? (100 * (charsAvailable / limits.maxChars)).toFixed(2) + '%' : '' }), [charsAvailable, limits.maxChars]);
+    const style = useMemo(() => ({ opacity: ttsUsedPercent < .9 ? 0 : 1 }), [ttsUsedPercent]);
+    const progressBarStyle = useMemo(() => ({ width: (100 * (1 - ttsUsedPercent)).toFixed(2) + '%' }), [ttsUsedPercent]);
 
     if (limits.maxChars === 0) return null;
 
-
-    return <div className={styles['tts-health']}>
+    return <div className={styles['tts-health']} style={style}>
         <label className={styles['tts-label']}>
             <div className={styles['tts-name']}>❤️ TTS Health</div>
             {limits.maxChars > 0 &&
-                <div className={styles['tts-percent']}>{nf.format(charsAvailable)} / {nf.format(limits.maxChars)} &bull; {pf.format(1 - limits.usedChars / limits.maxChars)}</div>}
+                <div className={styles['tts-percent']}>{nf.format(charsAvailable)} / {nf.format(limits.maxChars)} &bull; {pf.format(1 - ttsUsedPercent)}</div>}
         </label>
         <div className={styles['progress']}>
             <div className={styles['progress-bar']} style={progressBarStyle}></div>

src/scss/modules/TtsHealth.module.scss

@@ -11,6 +11,12 @@
   border-radius: .4em;
   font-size: .6em;
   width: calc(100% - 2em);
+  transition: opacity .3s linear;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 1 !important;
+  }
 
   .tts-label {
     display: flex;