From b7cce2840a5584a4512b0aef39e65eb27496de5e Mon Sep 17 00:00:00 2001
From: DJDavid98 <djdavid98@protonmail.com>
Date: Sat, 23 Dec 2023 01:04:10 +0100
Subject: [PATCH] Hide TTS health via opacity when sufficiently high

---
 src/js/chat/TtsHealth.tsx              | 9 +++++----
 src/scss/modules/TtsHealth.module.scss | 6 ++++++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/js/chat/TtsHealth.tsx b/src/js/chat/TtsHealth.tsx
index b475fe9..813f987 100644
--- a/src/js/chat/TtsHealth.tsx
+++ b/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>
diff --git a/src/scss/modules/TtsHealth.module.scss b/src/scss/modules/TtsHealth.module.scss
index 05086af..5f382c2 100644
--- a/src/scss/modules/TtsHealth.module.scss
+++ b/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;