left_sidebar: Add popover to make different views default.

Fixes #27324

web/src/left_sidebar_navigation_area.js

@@ -2,6 +2,7 @@ import $ from "jquery";
 
 import * as resize from "./resize";
 import * as scheduled_messages from "./scheduled_messages";
+import * as settings_config from "./settings_config";
 import * as ui_util from "./ui_util";
 
 let last_mention_count = 0;
@@ -141,6 +142,22 @@ export function highlight_inbox_view() {
     }, 0);
 }
 
+export function handle_home_view_changed(new_default_view) {
+    const $recent_view_sidebar_menu_icon = $(".recent-view-sidebar-menu-icon");
+    const $all_messages_sidebar_menu_icon = $(".all-messages-sidebar-menu-icon");
+    if (new_default_view === settings_config.default_view_values.all_messages.code) {
+        $recent_view_sidebar_menu_icon.removeClass("hide");
+        $all_messages_sidebar_menu_icon.addClass("hide");
+    } else if (new_default_view === settings_config.default_view_values.recent_topics.code) {
+        $recent_view_sidebar_menu_icon.addClass("hide");
+        $all_messages_sidebar_menu_icon.removeClass("hide");
+    } else {
+        // Inbox is default view.
+        $recent_view_sidebar_menu_icon.removeClass("hide");
+        $all_messages_sidebar_menu_icon.removeClass("hide");
+    }
+}
+
 export function initialize() {
     update_scheduled_messages_row();
 

web/src/left_sidebar_navigation_area_popovers.js

@@ -1,8 +1,10 @@
 import $ from "jquery";
 
 import render_drafts_sidebar_actions from "../templates/drafts_sidebar_action.hbs";
+import render_left_sidebar_all_messages_popover from "../templates/popovers/left_sidebar_all_messages_popover.hbs";
 import render_left_sidebar_condensed_views_popover from "../templates/popovers/left_sidebar_condensed_views_popover.hbs";
 import render_left_sidebar_inbox_popover from "../templates/popovers/left_sidebar_inbox_popover.hbs";
+import render_left_sidebar_recent_view_popover from "../templates/popovers/left_sidebar_recent_view_popover.hbs";
 import render_starred_messages_sidebar_actions from "../templates/starred_messages_sidebar_actions.hbs";
 
 import * as channel from "./channel";
@@ -130,6 +132,50 @@ export function initialize() {
         },
     });
 
+    // All messages popover
+    popover_menus.register_popover_menu(".all-messages-sidebar-menu-icon", {
+        ...popover_menus.left_sidebar_tippy_options,
+        onShow(instance) {
+            popover_menus.popover_instances.left_sidebar_all_messages_popover = instance;
+            popovers.hide_all();
+            const view_code = settings_config.default_view_values.all_messages.code;
+            instance.setContent(
+                parse_html(
+                    render_left_sidebar_all_messages_popover({
+                        is_default_view: user_settings.default_view === view_code,
+                        view_code,
+                    }),
+                ),
+            );
+        },
+        onHidden(instance) {
+            instance.destroy();
+            popover_menus.popover_instances.left_sidebar_all_messages_popover = undefined;
+        },
+    });
+
+    // Recent view popover
+    popover_menus.register_popover_menu(".recent-view-sidebar-menu-icon", {
+        ...popover_menus.left_sidebar_tippy_options,
+        onShow(instance) {
+            popover_menus.popover_instances.left_sidebar_recent_view_popover = instance;
+            popovers.hide_all();
+            const view_code = settings_config.default_view_values.recent_topics.code;
+            instance.setContent(
+                parse_html(
+                    render_left_sidebar_recent_view_popover({
+                        is_default_view: user_settings.default_view === view_code,
+                        view_code,
+                    }),
+                ),
+            );
+        },
+        onHidden(instance) {
+            instance.destroy();
+            popover_menus.popover_instances.left_sidebar_recent_view_popover = undefined;
+        },
+    });
+
     popover_menus.register_popover_menu(".left-sidebar-navigation-menu-icon", {
         ...popover_menus.left_sidebar_tippy_options,
         onShow(instance) {

web/src/popover_menus.js

@@ -27,6 +27,8 @@ export const popover_instances = {
     starred_messages: null,
     drafts: null,
     left_sidebar_inbox_popover: null,
+    left_sidebar_all_messages_popover: null,
+    left_sidebar_recent_view_popover: null,
     top_left_sidebar: null,
     message_actions: null,
     stream_settings: null,

web/src/server_events_dispatch.js

@@ -721,19 +721,22 @@ export function dispatch_normal_event(event) {
                 // present in the backend/Jinja2 templates.
                 settings_display.set_default_language_name(event.language_name);
             }
-            if (
-                event.property === "default_view" && // If current hash is empty (default view), and the
+            if (event.property === "default_view") {
+                left_sidebar_navigation_area.handle_home_view_changed(event.value);
+
+                // If current hash is empty (default view), and the
                 // user changes the default view while in settings,
                 // then going back to an empty hash on closing the
                 // overlay will not match the view currently displayed
                 // under settings, so we set the hash to the previous
                 // value of the default view.
-                !browser_history.state.hash_before_overlay &&
-                overlays.settings_open()
-            ) {
+                if (!browser_history.state.hash_before_overlay && overlays.settings_open()) {
                     browser_history.state.hash_before_overlay =
                         "#" +
-                    (original_default_view === "recent_topics" ? "recent" : original_default_view);
+                        (original_default_view === "recent_topics"
+                            ? "recent"
+                            : original_default_view);
+                }
             }
             if (event.property === "twenty_four_hour_time") {
                 // Rerender the whole message list UI

web/src/ui_init.js

@@ -103,6 +103,7 @@ import * as scroll_util from "./scroll_util";
 import * as search from "./search";
 import * as server_events from "./server_events";
 import * as settings from "./settings";
+import * as settings_config from "./settings_config";
 import * as settings_data from "./settings_data";
 import * as settings_display from "./settings_display";
 import * as settings_notifications from "./settings_notifications";
@@ -163,6 +164,10 @@ function initialize_left_sidebar() {
     const rendered_sidebar = render_left_sidebar({
         is_guest: page_params.is_guest,
         development_environment: page_params.development_environment,
+        is_all_messages_default_view:
+            user_settings.default_view === settings_config.default_view_values.all_messages.code,
+        is_recent_view_default_view:
+            user_settings.default_view === settings_config.default_view_values.recent_topics.code,
     });
 
     $("#left-sidebar-container").html(rendered_sidebar);

web/styles/left_sidebar.css

@@ -910,6 +910,10 @@ li.top_left_scheduled_messages {
        by .zulip-icon */
     font-size: 17px;
 
+    &.hide {
+        display: none !important;
+    }
+
     /*
         If you hover directly over the ellipsis itself,
         show it in black.

web/templates/left_sidebar.hbs

@@ -68,6 +68,9 @@
                     {{~!-- squash whitespace --~}}
                     <span class="left-sidebar-navigation-label">{{t 'Recent conversations' }}</span>
                 </a>
+                <span class="arrow sidebar-menu-icon recent-view-sidebar-menu-icon hidden-for-spectators {{#if is_recent_view_default_view}}hide{{/if}}">
+                    <i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i>
+                </span>
             </li>
             <li class="top_left_all_messages top_left_row">
                 <a href="#all_messages" class="home-link tippy-views-tooltip left-sidebar-navigation-label-container" data-tooltip-template-id="all-message-tooltip-template">
@@ -77,6 +80,9 @@
                     {{~!-- squash whitespace --~}}
                     <span class="left-sidebar-navigation-label">{{t 'All messages' }}</span>
                 </a>
+                <span class="arrow sidebar-menu-icon all-messages-sidebar-menu-icon hidden-for-spectators {{#if is_all_messages_default_view}}hide{{/if}}">
+                    <i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i>
+                </span>
             </li>
             <li class="top_left_mentions top_left_row hidden-for-spectators">
                 <a class="left-sidebar-navigation-label-container" href="#narrow/is/mentioned">

web/templates/popovers/left_sidebar_all_messages_popover.hbs

@@ -0,0 +1,8 @@
+<ul class="nav nav-list">
+    <li>
+        <a tabindex="0" class="set-default-view" data-view-code="{{view_code}}">
+            <i class="fa fa-home" aria-hidden="true"></i>
+            {{t "Make all messages my home view" }}
+        </a>
+    </li>
+</ul>

web/templates/popovers/left_sidebar_recent_view_popover.hbs

@@ -0,0 +1,8 @@
+<ul class="nav nav-list">
+    <li>
+        <a tabindex="0" class="set-default-view" data-view-code="{{view_code}}">
+            <i class="fa fa-home" aria-hidden="true"></i>
+            {{t "Make recent conversations my home view" }}
+        </a>
+    </li>
+</ul>

web/tests/dispatch.test.js

@@ -79,6 +79,7 @@ const submessage = mock_esm("../src/submessage");
 mock_esm("../src/left_sidebar_navigation_area", {
     update_starred_count() {},
     update_scheduled_messages_row() {},
+    handle_home_view_changed() {},
 });
 const typing_events = mock_esm("../src/typing_events");
 const unread_ops = mock_esm("../src/unread_ops");
@@ -957,6 +958,13 @@ run_test("user_settings", ({override}) => {
         assert.equal(user_settings.default_view, "all_messages");
     }
 
+    {
+        event = event_fixtures.user_settings__default_view_inbox;
+        user_settings.default_view = "all_messages";
+        dispatch(event);
+        assert.equal(user_settings.default_view, "inbox");
+    }
+
     {
         const stub = make_stub();
         event = event_fixtures.user_settings__color_scheme_automatic;

web/tests/lib/events.js

@@ -920,6 +920,13 @@ exports.fixtures = {
         value: "all_messages",
     },
 
+    user_settings__default_view_inbox: {
+        type: "user_settings",
+        op: "update",
+        property: "default_view",
+        value: "inbox",
+    },
+
     user_settings__default_view_recent_topics: {
         type: "user_settings",
         op: "update",