compose : Remove denominator in character counter.

Fixes: zulip#28706

This commit Optimizes the function without altering the core logic. Improves handling for text length exceeding max_length, displaying the negative count of exceeded characters. In the else if condition, when text length reaches 90%, it shows only the remaining characters. Introduces the remainingCharacters variable. This simplification improves clarity by showing the remaining characters and negative value of exceeded characters.

web/src/compose_validate.js

@@ -58,7 +58,7 @@ function update_send_button_status() {
 
 export function get_disabled_send_tooltip() {
     if (message_too_long) {
-        return $t({defaultMessage: "Message length shouldn't be greater than 10000 characters."});
+        return $t({defaultMessage: "Maximum message length: 10000 characters"});
     } else if (upload_in_progress) {
         return $t({defaultMessage: "Cannot send message while files are being uploaded."});
     }
@@ -752,24 +752,24 @@ export function check_overflow_text() {
     // expensive.
     const text = compose_state.message_content();
     const max_length = page_params.max_message_length;
+    const remainingCharacters = max_length - text.length;
     const $indicator = $("#compose-limit-indicator");
 
     if (text.length > max_length) {
         $indicator.addClass("over_limit");
         $("textarea#compose-textarea").addClass("over_limit");
         $indicator.html(
             render_compose_limit_indicator({
-                text_length: text.length,
+                remaining_length: remainingCharacters,
                 max_length,
             }),
         );
         compose_banner.show_error_message(
             $t(
                 {
-                    defaultMessage:
-                        "Message length shouldn't be greater than {max_length} characters.",
+                    defaultMessage: "Message length shouldn't be greater than 10000 characters.",
                 },
-                {max_length},
+                {exceeded_chars: Math.abs(remainingCharacters)},
             ),
             compose_banner.CLASSNAMES.message_too_long,
             $("#compose_banners"),
@@ -780,7 +780,7 @@ export function check_overflow_text() {
         $("textarea#compose-textarea").removeClass("over_limit");
         $indicator.html(
             render_compose_limit_indicator({
-                text_length: text.length,
+                remaining_length: remainingCharacters,
                 max_length,
             }),
         );

web/templates/compose_limit_indicator.hbs

@@ -1,2 +1,2 @@
-{{! Include a zero-width-space to allow breaks in narrow compose boxes. }}
-{{text_length}}​/{{max_length}}
+{{remaining_length}}
+

web/tests/compose_validate.test.js

@@ -588,7 +588,7 @@ 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​/10000\n");
+    assert.equal(limit_indicator_html, "-1\n\n");
     assert.ok($textarea.hasClass("over_limit"));
     assert.ok(banner_rendered);
     assert.ok($(".message-send-controls").hasClass("disabled-message-send-controls"));
@@ -598,7 +598,7 @@ test_ui("test_check_overflow_text", ({mock_template}) => {
     $textarea.val("a".repeat(9000 + 1));
     compose_validate.check_overflow_text();
     assert.ok(!$indicator.hasClass("over_limit"));
-    assert.equal(limit_indicator_html, "9001​/10000\n");
+    assert.equal(limit_indicator_html, "999\n\n");
     assert.ok(!$textarea.hasClass("over_limit"));
     assert.ok(!$(".message-send-controls").hasClass("disabled-message-send-controls"));
     assert.ok(!banner_rendered);