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 remaining_length variable. This simplification improves clarity by showing the remaining characters and negative value of exceeded characters.

web/src/compose_validate.ts

@@ -66,7 +66,7 @@ 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: "Maximum message length: 10000 characters"});
     } else if (upload_in_progress) {
         return $t({defaultMessage: "Cannot send message while files are being uploaded."});
     }
@@ -689,15 +689,15 @@ export function check_overflow_text(): number {
     // expensive.
     const text = compose_state.message_content();
     const max_length = realm.max_message_length;
+    const remaining_length = 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,
-                max_length,
+                remaining_length,
             }),
         );
         compose_banner.show_error_message(
@@ -711,14 +711,14 @@ export function check_overflow_text(): number {
             compose_banner.CLASSNAMES.message_too_long,
             $("#compose_banners"),
         );
+
         set_message_too_long(true);
     } else if (text.length > 0.9 * max_length) {
         $indicator.removeClass("over_limit");
         $("textarea#compose-textarea").removeClass("over_limit");
         $indicator.html(
             render_compose_limit_indicator({
-                text_length: text.length,
-                max_length,
+                remaining_length,
             }),
         );
         set_message_too_long(false);

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

@@ -546,7 +546,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"));
@@ -556,7 +556,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);