From 06828fa42bcf64a6a35831281ff2cf23c917f19f Mon Sep 17 00:00:00 2001 From: Evy Kassirer Date: Wed, 8 Oct 2025 15:09:23 -0700 Subject: [PATCH] inbox: Add popover menu to toggle channel folder option. Fixes #35951. --- web/src/channel_folders_popover.ts | 44 +++++++++++++++++++++++-- web/src/inbox_ui.ts | 3 ++ web/src/popover_menus.ts | 2 ++ web/styles/app_variables.css | 2 +- web/styles/inbox.css | 20 +++++++++++ web/templates/inbox_view/inbox_view.hbs | 3 ++ 6 files changed, 71 insertions(+), 3 deletions(-) diff --git a/web/src/channel_folders_popover.ts b/web/src/channel_folders_popover.ts index 7cb1d2ce23..b930d6e97f 100644 --- a/web/src/channel_folders_popover.ts +++ b/web/src/channel_folders_popover.ts @@ -9,7 +9,7 @@ import * as popover_menus from "./popover_menus.ts"; import {parse_html} from "./ui_util.ts"; import {user_settings} from "./user_settings.ts"; -function do_change_show_channel_folders(instance: tippy.Instance): void { +function do_change_show_channel_folders_left_sidebar(instance: tippy.Instance): void { const show_channel_folders = user_settings.web_left_sidebar_show_channel_folders; const data = { web_left_sidebar_show_channel_folders: JSON.stringify(!show_channel_folders), @@ -21,6 +21,18 @@ function do_change_show_channel_folders(instance: tippy.Instance): void { popover_menus.hide_current_popover_if_visible(instance); } +function do_change_show_channel_folders_inbox(instance: tippy.Instance): void { + const show_channel_folders = user_settings.web_inbox_show_channel_folders; + const data = { + web_inbox_show_channel_folders: JSON.stringify(!show_channel_folders), + }; + void channel.patch({ + url: "/json/settings", + data, + }); + popover_menus.hide_current_popover_if_visible(instance); +} + export function initialize(): void { popover_menus.register_popover_menu("#left-sidebar-search .channel-folders-sidebar-menu-icon", { ...popover_menus.left_sidebar_tippy_options, @@ -29,7 +41,7 @@ export function initialize(): void { const $popper = $(instance.popper); assert(instance.reference instanceof HTMLElement); $popper.one("click", "#left_sidebar_channel_folders", () => { - do_change_show_channel_folders(instance); + do_change_show_channel_folders_left_sidebar(instance); }); }, onShow(instance) { @@ -49,4 +61,32 @@ export function initialize(): void { popover_menus.popover_instances.show_folders_sidebar = null; }, }); + + popover_menus.register_popover_menu("#inbox-view .channel-folders-inbox-menu-icon", { + ...popover_menus.left_sidebar_tippy_options, + theme: "popover-menu", + onMount(instance) { + const $popper = $(instance.popper); + assert(instance.reference instanceof HTMLElement); + $popper.one("click", "#left_sidebar_channel_folders", () => { + do_change_show_channel_folders_inbox(instance); + }); + }, + onShow(instance) { + const show_channel_folders = user_settings.web_inbox_show_channel_folders; + // Assuming that the instance can be shown, track and + // prep the instance for showing + popover_menus.popover_instances.show_folders_inbox = instance; + instance.setContent( + parse_html(render_channel_folder_setting_popover({show_channel_folders})), + ); + popover_menus.on_show_prep(instance); + + return undefined; + }, + onHidden(instance) { + instance.destroy(); + popover_menus.popover_instances.show_folders_inbox = null; + }, + }); } diff --git a/web/src/inbox_ui.ts b/web/src/inbox_ui.ts index 878471bb93..738887f29a 100644 --- a/web/src/inbox_ui.ts +++ b/web/src/inbox_ui.ts @@ -1194,6 +1194,7 @@ function render_channel_view(channel_id: number): void { normal_view: false, search_val: search_keyword, INBOX_SEARCH_ID, + show_channel_folder_toggle: channel_folders.user_has_folders(), }), ); // Hide any empty inbox text by default. @@ -1234,6 +1235,7 @@ export function complete_rerender(coming_from_other_views = false): void { $("#inbox-pane").html( render_inbox_view({ unknown_channel: true, + show_channel_folder_toggle: channel_folders.user_has_folders(), }), ); return; @@ -1255,6 +1257,7 @@ export function complete_rerender(coming_from_other_views = false): void { topics_dict, streams_dict, channel_folders_dict, + show_channel_folder_toggle: channel_folders.user_has_folders(), ...additional_context, }), ); diff --git a/web/src/popover_menus.ts b/web/src/popover_menus.ts index 8afc9b1367..22bae7bb01 100644 --- a/web/src/popover_menus.ts +++ b/web/src/popover_menus.ts @@ -34,6 +34,7 @@ type PopoverName = | "stream_actions_popover" | "color_picker_popover" | "show_folders_sidebar" + | "show_folders_inbox" | "send_later_options"; export const popover_instances: Record = { @@ -57,6 +58,7 @@ export const popover_instances: Record = { stream_actions_popover: null, color_picker_popover: null, show_folders_sidebar: null, + show_folders_inbox: null, send_later_options: null, }; diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css index 837a1eac63..fe193290bc 100644 --- a/web/styles/app_variables.css +++ b/web/styles/app_variables.css @@ -2017,7 +2017,7 @@ ); /* Inbox view constants - Values from Figma design */ - --width-inbox-search: 29.0625em; /* 465px / 16px em */ + --width-inbox-search: calc(27.4375em); /* 439px / 16px em */ --width-inbox-filters-dropdown: 10.7142em; /* 150px / 14px em */ --color-background-inbox-no-unreads-illustration: light-dark( hsl(147deg 57% 25%), diff --git a/web/styles/inbox.css b/web/styles/inbox.css index 8575a97453..7aee3ee6cf 100644 --- a/web/styles/inbox.css +++ b/web/styles/inbox.css @@ -451,6 +451,26 @@ .hidden_by_filters { display: none !important; } + + .channel-folders-inbox-menu-icon { + display: grid; + /* width excluding left & right margin */ + width: calc(var(--left-sidebar-vdots-width) - 3px); + cursor: pointer; + place-items: center center; + border-radius: 3px; + margin: 2px 2px 2px 1px; + color: var(--color-vdots-visible); + + i.zulip-icon { + font-size: 1.0625em; + } + + &:hover { + color: var(--color-vdots-hover); + background-color: var(--color-background-sidebar-action-hover); + } + } } .inbox-container #inbox-pane #inbox-empty-without-search { diff --git a/web/templates/inbox_view/inbox_view.hbs b/web/templates/inbox_view/inbox_view.hbs index fd44379343..ca41a65b25 100644 --- a/web/templates/inbox_view/inbox_view.hbs +++ b/web/templates/inbox_view/inbox_view.hbs @@ -9,6 +9,9 @@ {{#> input_wrapper . input_type="filter-input" custom_classes="inbox-search-wrapper" icon="search" input_button_icon="close"}} {{/input_wrapper}} + {{#if show_channel_folder_toggle}} + + {{/if}}
{{t "No conversations match your filters."}}