From 1f85a46277bcca6948710fe043f61e1b78c58f45 Mon Sep 17 00:00:00 2001
From: N-Shar-ma <bablinaneh@gmail.com>
Date: Wed, 24 Apr 2024 12:16:47 +0530
Subject: [PATCH] compose: Redesign limit indicator to show remaining
 characters count.

Additionally, the text colors have been updated for both light and dark
themes, it starts showing when 900 or less characters are left, as 999
was too soon, and has a tooltip to show the maximum characters limit.

Fixes: #28706.
---
 web/src/compose_validate.ts               | 14 ++++++++------
 web/src/ui_init.js                        |  1 +
 web/styles/app_variables.css              |  4 ++++
 web/styles/compose.css                    | 10 ++++++----
 web/templates/compose.hbs                 |  2 +-
 web/templates/compose_limit_indicator.hbs |  3 +--
 web/tests/compose_validate.test.js        |  8 ++++----
 7 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/web/src/compose_validate.ts b/web/src/compose_validate.ts
index 21b721719fd90..45a50e8b14854 100644
--- a/web/src/compose_validate.ts
+++ b/web/src/compose_validate.ts
@@ -66,7 +66,10 @@ function update_send_button_status(): void {
 
 export function get_disabled_send_tooltip(): string {
     if (message_too_long) {
-        return $t({defaultMessage: "Message length shouldn't be greater than 10000 characters."});
+        return $t(
+            {defaultMessage: `Message length shouldn't be greater than {max_length} characters.`},
+            {max_length: realm.max_message_length},
+        );
     } else if (upload_in_progress) {
         return $t({defaultMessage: "Cannot send message while files are being uploaded."});
     }
@@ -689,6 +692,7 @@ export function check_overflow_text(): number {
     // expensive.
     const text = compose_state.message_content();
     const max_length = realm.max_message_length;
+    const remaining_characters = max_length - text.length;
     const $indicator = $("#compose-limit-indicator");
 
     if (text.length > max_length) {
@@ -696,8 +700,7 @@ export function check_overflow_text(): number {
         $("textarea#compose-textarea").addClass("over_limit");
         $indicator.html(
             render_compose_limit_indicator({
-                text_length: text.length,
-                max_length,
+                remaining_characters,
             }),
         );
         compose_banner.show_error_message(
@@ -712,13 +715,12 @@ export function check_overflow_text(): number {
             $("#compose_banners"),
         );
         set_message_too_long(true);
-    } else if (text.length > 0.9 * max_length) {
+    } else if (remaining_characters <= 900) {
         $indicator.removeClass("over_limit");
         $("textarea#compose-textarea").removeClass("over_limit");
         $indicator.html(
             render_compose_limit_indicator({
-                text_length: text.length,
-                max_length,
+                remaining_characters,
             }),
         );
         set_message_too_long(false);
diff --git a/web/src/ui_init.js b/web/src/ui_init.js
index 7cf66cb46641f..fb6ea0bb6cff1 100644
--- a/web/src/ui_init.js
+++ b/web/src/ui_init.js
@@ -181,6 +181,7 @@ function initialize_compose_box() {
                 giphy_enabled: giphy.is_giphy_enabled(),
                 max_stream_name_length: realm.max_stream_name_length,
                 max_topic_length: realm.max_topic_length,
+                max_message_length: realm.max_message_length,
             }),
         ),
     );
diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index b92931f731c2d..7b6bf37a89839 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -276,6 +276,8 @@
         231deg 100% 90% / 50%
     );
     --color-compose-chevron-arrow: hsl(0deg 0% 58%);
+    --color-limit-indicator: hsl(38deg 100% 36%);
+    --color-limit-indicator-over-limit: hsl(3deg 80% 40%);
 
     /* Text colors */
     --color-text-default: hsl(0deg 0% 20%);
@@ -585,6 +587,8 @@
         235deg 100% 70% / 11%
     );
     --color-background-popover: hsl(212deg 32% 14%);
+    --color-limit-indicator: hsl(38deg 100% 70%);
+    --color-limit-indicator-over-limit: hsl(3deg 80% 60%);
 
     /* Text colors */
     --color-text-default: hsl(0deg 0% 100% / 75%);
diff --git a/web/styles/compose.css b/web/styles/compose.css
index c954b3d4b7420..1c92537aee127 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -304,14 +304,16 @@
 
 #compose-limit-indicator {
     font-size: 12px;
-    color: hsl(39deg 100% 50%);
+    color: var(--color-limit-indicator);
+    width: max-content;
 
-    /* Keep the limit indicator
-       just above the send button */
+    /* Keep the limit indicator just above
+       and aligned with the send button */
     margin-top: auto;
+    padding: 3px 3px 3px 0;
 
     &.over_limit {
-        color: hsl(0deg 76% 65%);
+        color: var(--color-limit-indicator-over-limit);
         font-weight: bold;
     }
 }
diff --git a/web/templates/compose.hbs b/web/templates/compose.hbs
index eccc4a4a52e3f..9e479f50bb284 100644
--- a/web/templates/compose.hbs
+++ b/web/templates/compose.hbs
@@ -89,7 +89,7 @@
                                 <a id="compose-drafts-button" role="button" class="send-control-button hide-sm" tabindex=0 href="#drafts">
                                     <span class="compose-drafts-text">{{t 'Drafts' }}</span><span class="compose-drafts-count-container">(<span class="compose-drafts-count"></span>)</span>
                                 </a>
-                                <span id="compose-limit-indicator"></span>
+                                <span id="compose-limit-indicator" class="tippy-zulip-tooltip" data-tippy-content="{{t 'Maximum message length: {max_message_length} characters' }}"></span>
                                 <div class="message-send-controls">
                                     <button type="submit" id="compose-send-button" class="send_message compose-submit-button compose-send-or-save-button" aria-label="{{t 'Send' }}">
                                         <img class="loader" alt="" src="" />
diff --git a/web/templates/compose_limit_indicator.hbs b/web/templates/compose_limit_indicator.hbs
index 6fe0baf92bcd3..ba72353563272 100644
--- a/web/templates/compose_limit_indicator.hbs
+++ b/web/templates/compose_limit_indicator.hbs
@@ -1,2 +1 @@
-{{! Include a zero-width-space to allow breaks in narrow compose boxes. }}
-{{text_length}}&ZeroWidthSpace;/{{max_length}}
+{{remaining_characters}}
diff --git a/web/tests/compose_validate.test.js b/web/tests/compose_validate.test.js
index 57d26cc399285..44949bde46809 100644
--- a/web/tests/compose_validate.test.js
+++ b/web/tests/compose_validate.test.js
@@ -546,24 +546,24 @@ test_ui("test_check_overflow_text", ({mock_template}) => {
     $textarea.val("a".repeat(10000 + 1));
     compose_validate.check_overflow_text();
     assert.ok($indicator.hasClass("over_limit"));
-    assert.equal(limit_indicator_html, "10001&ZeroWidthSpace;/10000\n");
+    assert.equal(limit_indicator_html, "-1\n");
     assert.ok($textarea.hasClass("over_limit"));
     assert.ok(banner_rendered);
     assert.ok($(".message-send-controls").hasClass("disabled-message-send-controls"));
 
     // Indicator should show orange colored text
     banner_rendered = false;
-    $textarea.val("a".repeat(9000 + 1));
+    $textarea.val("a".repeat(9100));
     compose_validate.check_overflow_text();
     assert.ok(!$indicator.hasClass("over_limit"));
-    assert.equal(limit_indicator_html, "9001&ZeroWidthSpace;/10000\n");
+    assert.equal(limit_indicator_html, "900\n");
     assert.ok(!$textarea.hasClass("over_limit"));
     assert.ok(!$(".message-send-controls").hasClass("disabled-message-send-controls"));
     assert.ok(!banner_rendered);
 
     // Indicator must be empty
     banner_rendered = false;
-    $textarea.val("a".repeat(9000));
+    $textarea.val("a".repeat(9100 - 1));
     compose_validate.check_overflow_text();
     assert.ok(!$indicator.hasClass("over_limit"));
     assert.equal($indicator.text(), "");