compose: Collapse compose-box after sending message.

Previously, after sending a message from the full-sized compose-box,
the compose-box remained in expanded state covering the entire middle
part. Instead, it should return to the original state after the
message is sent.

There's a subtle race that would cause the "Scroll down to see your
message" compose notification to appear incorrectly, because the
full-size compose box occluded the entire message feed at the time the
message was locally echoed, even though it would no longer do so after
collapsing.

We address that by shrinking the compose box immediately before doing
a local echo, in addition to the primary code path in
`clear_compose_box`.  Care is taken to ensure that we avoid shrinking
the compose box when sending a message that cannot be locally echoed
and gets an error from the server.

Tested on my Ubuntu development environment, by sending empty message,
valid message and slash commands. The compose-box only shrunk on
sending valid messages.

Fixes part of #19353.

static/js/compose.js

@@ -182,6 +182,14 @@ export function create_message_object() {
 }
 
 export function clear_compose_box() {
+    /* Before clearing the compose box, we reset it to the
+     * default/normal size. Note that for locally echoed messages, we
+     * will have already done this action before echoing the message
+     * to avoid the compose box triggering "new message out of view"
+     * notifications incorrectly. */
+    if (compose_ui.is_full_size()) {
+        compose_ui.make_compose_box_original_size();
+    }
     $("#compose-textarea").val("").trigger("focus");
     compose_validate.check_overflow_text();
     $("#compose-textarea").removeData("draft-id");

static/js/echo.js

@@ -4,6 +4,7 @@ import * as alert_words from "./alert_words";
 import {all_messages_data} from "./all_messages_data";
 import * as blueslip from "./blueslip";
 import * as compose from "./compose";
+import * as compose_ui from "./compose_ui";
 import * as drafts from "./drafts";
 import * as local_message from "./local_message";
 import * as markdown from "./markdown";
@@ -241,6 +242,18 @@ export function try_deliver_locally(message_request) {
     const draft_id = drafts.update_draft();
     message_request.draft_id = draft_id;
 
+    // Now that we've committed to delivering the message locally, we
+    // shrink the compose-box if it is in the full-screen state. This
+    // would have happened anyway in clear_compose_box, however, we
+    // need to this operation before inserting the local message into
+    // the feed. Otherwise, the out-of-view notification will be
+    // always triggered on the top of compose-box, regardless of
+    // whether the message would be visible after shrinking compose,
+    // because compose occludes the whole screen.
+    if (compose_ui.is_full_size()) {
+        compose_ui.make_compose_box_original_size();
+    }
+
     const message = insert_local_message(message_request, local_id_float);
     return message;
 }