compose: Fix banners running off the screen.

We introduce a scrollable region, with a simplebar scrollbar.

Fixes: #25115.

web/src/compose_validate.js

@@ -15,6 +15,7 @@ import {$t} from "./i18n";
 import {page_params} from "./page_params";
 import * as peer_data from "./peer_data";
 import * as people from "./people";
+import * as scroll_util from "./scroll_util";
 import * as settings_config from "./settings_config";
 import * as settings_data from "./settings_data";
 import * as stream_data from "./stream_data";
@@ -25,6 +26,10 @@ let wildcard_mention;
 
 export let wildcard_mention_large_stream_threshold = 15;
 
+export function append_compose_banner_to_banner_list(new_row) {
+    scroll_util.get_content_element($("#compose_banners")).append(new_row);
+}
+
 export function needs_subscribe_warning(user_id, stream_id) {
     // This returns true if all of these conditions are met:
     //  * the user is valid
@@ -105,7 +110,7 @@ export function warn_if_private_stream_is_linked(linked_stream) {
         classname: compose_banner.CLASSNAMES.private_stream_warning,
     });
 
-    $("#compose_banners").append(new_row);
+    append_compose_banner_to_banner_list(new_row);
 }
 
 export function warn_if_mentioning_unsubscribed_user(mentioned) {
@@ -161,7 +166,7 @@ export function warn_if_mentioning_unsubscribed_user(mentioned) {
             };
 
             const new_row = render_not_subscribed_warning(context);
-            $("#compose_banners").append(new_row);
+            append_compose_banner_to_banner_list(new_row);
         }
     }
 }
@@ -197,7 +202,6 @@ export function warn_if_topic_resolved(topic_changed) {
     const stream_name = compose_state.stream_name();
     const message_content = compose_state.message_content();
     const sub = stream_data.get_sub(stream_name);
-    const $compose_banner_area = $("#compose_banners");
 
     if (sub && message_content !== "" && resolved_topic.is_resolved(topic_name)) {
         if (compose_state.has_recipient_viewed_topic_resolved_banner()) {
@@ -222,7 +226,7 @@ export function warn_if_topic_resolved(topic_changed) {
         };
 
         const new_row = render_compose_banner(context);
-        $compose_banner_area.append(new_row);
+        append_compose_banner_to_banner_list(new_row);
         compose_state.set_recipient_viewed_topic_resolved_banner(true);
     } else {
         clear_topic_resolved_warning();
@@ -232,7 +236,6 @@ export function warn_if_topic_resolved(topic_changed) {
 function show_wildcard_warnings(stream_id) {
     const subscriber_count = peer_data.get_subscriber_count(stream_id) || 0;
 
-    const $compose_banner_area = $("#compose_banners");
     const classname = compose_banner.CLASSNAMES.wildcard_warning;
     const wildcard_template = render_wildcard_warning({
         banner_type: compose_banner.WARNING,
@@ -246,7 +249,7 @@ function show_wildcard_warnings(stream_id) {
 
     // only show one error for any number of @all or @everyone mentions
     if ($(`#compose_banners .${CSS.escape(classname)}`).length === 0) {
-        $compose_banner_area.append(wildcard_template);
+        append_compose_banner_to_banner_list(wildcard_template);
     }
 
     user_acknowledged_wildcard = false;
@@ -421,7 +424,7 @@ export function validation_error(error_type, stream_name) {
                 // closing the banner would be more confusing than helpful.
                 hide_close_button: true,
             });
-            $("#compose_banners").append(new_row);
+            append_compose_banner_to_banner_list(new_row);
             return false;
         }
     }

web/src/notifications.js

@@ -7,6 +7,7 @@ import * as alert_words from "./alert_words";
 import * as blueslip from "./blueslip";
 import * as channel from "./channel";
 import * as compose_banner from "./compose_banner";
+import * as compose_validate from "./compose_validate";
 import * as favicon from "./favicon";
 import * as hash_util from "./hash_util";
 import {$t} from "./i18n";
@@ -178,7 +179,7 @@ function notify_unmute(muted_narrow, stream_id, topic_name) {
         }),
     );
     compose_banner.clear_unmute_topic_notifications();
-    $("#compose_banners").append($unmute_notification);
+    compose_validate.append_compose_banner_to_banner_list($unmute_notification);
 }
 
 export function notify_above_composebox(
@@ -200,7 +201,7 @@ export function notify_above_composebox(
     // We pass in include_unmute_banner as false because we don't want to
     // clear any unmute_banner associated with this same message.
     compose_banner.clear_message_sent_banners(false);
-    $("#compose_banners").append($notification);
+    compose_validate.append_compose_banner_to_banner_list($notification);
 }
 
 if (window.electron_bridge !== undefined) {

web/src/ui_init.js

@@ -295,8 +295,11 @@ export function initialize_kitchen_sink_stuff() {
 
     // Ignore wheel events in the compose area which weren't already handled above.
     $("#compose").on("wheel", (e) => {
-        // Except for the stream select dropdown, which still needs scroll events.
+        // Except for the stream select dropdown and compose banners, which still needs scroll events.
-        if ($(e.target).parents(".dropdown-list-body").length > 0) {
+        if (
+            $(e.target).closest(".dropdown-list-body").length ||
+            $(e.target).closest("#compose_banners").length
+        ) {
             return;
         }
         e.stopPropagation();

web/src/upload.js

@@ -7,6 +7,7 @@ import render_upload_banner from "../templates/compose_banner/upload_banner.hbs"
 import * as compose_actions from "./compose_actions";
 import * as compose_state from "./compose_state";
 import * as compose_ui from "./compose_ui";
+import * as compose_validate from "./compose_validate";
 import {csrf_token} from "./csrf";
 import {$t} from "./i18n";
 import {page_params} from "./page_params";
@@ -122,7 +123,13 @@ function add_upload_banner(config, banner_type, banner_text, file_id) {
         banner_text,
         file_id,
     });
-    get_item("banner_container", config).append(new_banner);
+    // TODO: Extend compose_validate.append_compose_banner_to_banner_list
+    // to support the message edit container too.
+    if (config.mode === "compose") {
+        compose_validate.append_compose_banner_to_banner_list(new_banner);
+    } else {
+        get_item("banner_container", config).append(new_banner);
+    }
 }
 
 export function show_error_message(

web/styles/compose.css

@@ -66,6 +66,11 @@
 .message_comp {
     display: none;
     padding: 5px 10px 0 5px;
+
+    #compose_banners {
+        max-height: min(25vh, 240px);
+        overflow-y: auto;
+    }
 }
 
 .autocomplete_secondary {

web/templates/compose.hbs

@@ -75,7 +75,7 @@
         </div>
     </div>
     <div class="message_comp">
-        <div id="compose_banners"></div>
+        <div id="compose_banners" data-simplebar></div>
         <div class="composition-area">
             <form id="send_message_form" action="/json/messages" method="post">
                 <div class="compose_table">