From 31d7016bd9e8bdceee327479bc2339d0445b1764 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 13 Aug 2023 12:00:33 +0800
Subject: [PATCH] Default show chars-left donut

---
 src/app.css                | 18 +++++++++++++-----
 src/components/compose.jsx |  3 ++-
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/app.css b/src/app.css
index e29f031a..7e744233 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1641,27 +1641,35 @@ meter.donut::-moz-meter-bar {
 
 meter.donut {
   position: relative;
-  width: 24px;
-  height: 24px;
+  --dimension: 24px;
+  --border-width: 2px;
+  --middle-circle-radius: calc(var(--dimension) / 2 - var(--border-width));
+  width: var(--dimension);
+  height: var(--dimension);
   border-radius: 50%;
   --fill: calc(var(--percentage) * 1%);
   --color: var(--link-color);
   --middle-circle: radial-gradient(
     circle at 50% 50%,
-    var(--bg-faded-color) 10px,
-    transparent 10px
+    var(--bg-color) var(--middle-circle-radius),
+    transparent var(--middle-circle-radius)
   );
   background-image: var(--middle-circle),
-    conic-gradient(var(--color) var(--fill), var(--bg-faded-blur-color) 0);
+    conic-gradient(var(--color) var(--fill), var(--outline-color) 0);
+  transform: scale(0.7);
+  transition: transform 0.2s ease-in-out;
 }
 meter.donut.warning {
   --color: var(--orange-color);
+  transform: scale(1);
 }
 meter.donut.danger {
   --color: var(--red-color);
+  transform: scale(1);
 }
 meter.donut.explode {
   background-image: none;
+  transform: scale(1);
 }
 meter.donut:is(.warning, .danger, .explode):after {
   content: attr(data-left);
diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index 0da82f4e..9e6597ce 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -1381,7 +1381,7 @@ function CharCountMeter({ maxCharacters = 500, hidden }) {
   const snapStates = useSnapshot(states);
   const charCount = snapStates.composerCharacterCount;
   const leftChars = maxCharacters - charCount;
-  if (charCount <= maxCharacters / 2 || hidden) {
+  if (hidden) {
     return <meter class="donut" hidden />;
   }
   return (
@@ -1398,6 +1398,7 @@ function CharCountMeter({ maxCharacters = 500, hidden }) {
       value={charCount}
       max={maxCharacters}
       data-left={leftChars}
+      title={`${leftChars}/${maxCharacters}`}
       style={{
         '--percentage': (charCount / maxCharacters) * 100,
       }}