From bfbf4f6f68c632bb03ff42b9424b073dc316767a 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 21b721719f..45a50e8b14 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 7cf66cb466..fb6ea0bb6c 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 b92931f731..7b6bf37a89 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 c954b3d4b7..1c92537aee 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 eccc4a4a52..9e479f50bb 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 6fe0baf92b..ba72353563 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 57d26cc399..44949bde46 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(), "");