compose_closed_ui: Change mobile "+" button behavior.

This commit removes the popover from the "+" button shown in the closed
compose UI at mobile widths, and instead performs compose actions
directly on-click. The "+" button now opens the compose box with the
channel picker open (even if the user is in a topic or channel view).

This reduces the number of clicks required to start a new message from
the closed compose UI in mobile views, and makes the behavior more
consistent across all the views.

Fixes #30634.

web/src/compose_closed_ui.ts

@@ -152,6 +152,18 @@ export function initialize(): void {
         });
     });
 
+    $("body").on("click", ".compose_mobile_button", () => {
+        // Remove the channel and topic context, since on mobile widths,
+        // the "+" button should open the compose box with the channel
+        // picker open (even if the user is in a topic or channel view).
+        compose_actions.start({
+            message_type: "stream",
+            stream_id: undefined,
+            topic: "",
+            keep_composebox_empty: true,
+        });
+    });
+
     $("body").on("click", ".compose_new_direct_message_button", () => {
         compose_actions.start({
             message_type: "private",

web/src/compose_popovers.ts

@@ -1,11 +1,8 @@
 import $ from "jquery";
 import assert from "minimalistic-assert";
-import * as tippy from "tippy.js";
 
 import render_compose_control_buttons_popover from "../templates/popovers/compose_control_buttons/compose_control_buttons_popover.hbs";
-import render_mobile_message_buttons_popover from "../templates/popovers/mobile_message_buttons_popover.hbs";
 
-import * as compose_actions from "./compose_actions";
 import * as giphy_state from "./giphy_state";
 import * as popover_menus from "./popover_menus";
 import * as popovers from "./popovers";
@@ -13,50 +10,6 @@ import * as rows from "./rows";
 import {parse_html} from "./ui_util";
 
 export function initialize(): void {
-    // compose box buttons popover shown on mobile widths.
-    // We want this click event to propagate and hide other popovers
-    // that could possibly obstruct user from using this popover.
-    tippy.delegate("body", {
-        ...popover_menus.default_popover_props,
-        // Attach the click event to `.mobile_button_container`, since
-        // the button (`.compose_mobile_button`) already has a hover
-        // action attached, for showing the keyboard shortcut,
-        // and Tippy cannot handle events that trigger two different
-        // actions
-        target: ".mobile_button_container",
-        placement: "top",
-        theme: "popover-menu",
-        onShow(instance) {
-            popover_menus.popover_instances.compose_mobile_button = instance;
-            popover_menus.on_show_prep(instance);
-            instance.setContent(parse_html(render_mobile_message_buttons_popover()));
-        },
-        onMount(instance) {
-            const $popper = $(instance.popper);
-            $popper.one("click", ".compose_mobile_stream_button", (e) => {
-                compose_actions.start({
-                    message_type: "stream",
-                    trigger: "clear topic button",
-                });
-                e.stopPropagation();
-                popover_menus.hide_current_popover_if_visible(instance);
-            });
-            $popper.one("click", ".compose_mobile_direct_message_button", (e) => {
-                compose_actions.start({
-                    message_type: "private",
-                });
-                e.stopPropagation();
-                popover_menus.hide_current_popover_if_visible(instance);
-            });
-        },
-        onHidden(instance) {
-            // Destroy instance so that event handlers
-            // are destroyed too.
-            instance.destroy();
-            popover_menus.popover_instances.compose_mobile_button = null;
-        },
-    });
-
     // Click event handlers for it are handled in `compose_ui` and
     // we don't want to close this popover on click inside it but
     // only if user clicked outside it.

web/src/popover_menus.ts

@@ -22,7 +22,6 @@ type PopoverName =
     | "top_left_sidebar"
     | "message_actions"
     | "stream_settings"
-    | "compose_mobile_button"
     | "topics_menu"
     | "send_later"
     | "change_visibility_policy"
@@ -40,7 +39,6 @@ export const popover_instances: Record<PopoverName, tippy.Instance | null> = {
     top_left_sidebar: null,
     message_actions: null,
     stream_settings: null,
-    compose_mobile_button: null,
     topics_menu: null,
     send_later: null,
     change_visibility_policy: null,

web/templates/popovers/mobile_message_buttons_popover.hbs

@@ -1,18 +0,0 @@
-<div class="popover-menu" data-simplebar data-simplebar-tab-index="-1">
-    <ul role="menu" class="popover-menu-list">
-        <li role="none" class="link-item popover-menu-list-item">
-            <a role="menuitem" class="compose_mobile_stream_button popover-menu-link" tabindex="0">
-                <i class="popover-menu-icon zulip-icon zulip-icon-square-plus" aria-hidden="true"></i>
-                <span class="popover-menu-label">{{t "Start new conversation" }}</span>
-                {{popover_hotkey_hints "C"}}
-            </a>
-        </li>
-        <li role="none" class="link-item popover-menu-list-item">
-            <a role="menuitem" class="compose_mobile_direct_message_button popover-menu-link" tabindex="0">
-                <i class="popover-menu-icon zulip-icon zulip-icon-user" aria-hidden="true"></i>
-                <span class="popover-menu-label">{{t "New direct message" }}</span>
-                {{popover_hotkey_hints "X"}}
-            </a>
-        </li>
-    </ul>
-</div>

web/templates/tooltip_templates.hbs

@@ -19,8 +19,7 @@
     {{tooltip_hotkey_hints "R"}}
 </template>
 <template id="left_bar_compose_mobile_button_tooltip_template">
-    {{t 'New message' }}
-    {{tooltip_hotkey_hints "C"}}
+    {{t 'Start new conversation' }}
 </template>
 <template id="new_topic_message_button_tooltip_template">
     {{t 'New topic' }}