Refactor check_overflow_text function

This commit refactors the  function to . The logic for handling if remaining characters less than 0 than show exceeded msg and else condition show remainingCharacters. This change simplifies the code while ensuring clarity in different scenarios of remaining characters.

Additionally, the tooltip associated with the character counter has been updated to display 'Maximum message length: 10000 characters.'

Fixes: zulip#28706

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,44 +752,33 @@ 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) {
+    if (remainingCharacters < 0) {
         $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.",
-                },
-                {max_length},
-            ),
+            $t({ defaultMessage: "Message length exceeded by {exceeded_chars} characters." }, { exceeded_chars: Math.abs(remainingCharacters) }),
             compose_banner.CLASSNAMES.message_too_long,
             $("#compose_banners"),
         );
         set_message_too_long(true);
-    } else if (text.length > 0.9 * max_length) {
+    } else {
         $indicator.removeClass("over_limit");
         $("textarea#compose-textarea").removeClass("over_limit");
         $indicator.html(
             render_compose_limit_indicator({
-                text_length: text.length,
+                remaining_length: remainingCharacters,
                 max_length,
             }),
         );
-        set_message_too_long(false);
-        $(`#compose_banners .${CSS.escape(compose_banner.CLASSNAMES.message_too_long)}`).remove();
-    } else {
-        $indicator.text("");
-        $("textarea#compose-textarea").removeClass("over_limit");
-
         set_message_too_long(false);
         $(`#compose_banners .${CSS.escape(compose_banner.CLASSNAMES.message_too_long)}`).remove();
     }

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

@@ -573,7 +573,7 @@ test_ui("test_check_overflow_text", ({mock_template}) => {
         assert.equal(
             data.banner_text,
             $t({
-                defaultMessage: "Message length shouldn't be greater than 10000 characters.",
+                defaultMessage: "Message length exceeded by 100 characters.",
             }),
         );
         banner_rendered = true;
@@ -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, "10001\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, "9001\n");
     assert.ok(!$textarea.hasClass("over_limit"));
     assert.ok(!$(".message-send-controls").hasClass("disabled-message-send-controls"));
     assert.ok(!banner_rendered);