settings: Add button to reset channel notifications to default.

This commit adds a "Reset to default notifications" button in the
Notifications menu, to the right of the channel name, for which a
user has selected custom notifications and a confirmation
dialog to confirm this action.

Fixes #19860.

docs/THIRDPARTY

@@ -296,6 +296,11 @@ Source: https://lucide.dev/icons/expand
 Copyright: 2013-2022 Cole Bemis
 License: ISC License
 
+Files: web/shared/icons/reset.svg
+Source: https://lucide.dev/icons/undo-2
+Copyright: 2013-2022 Cole Bemis
+License: ISC License
+
 Files: web/third/bootstrap/css/bootstrap.app.css
 Copyright: 2012 Twitter, Inc.
 License: Apache-2.0

web/shared/icons/reset.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+     id="path3"
+     style="baseline-shift:baseline;display:inline;overflow:visible;opacity:1;fill:#000000;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;enable-background:accumulate;stop-color:#000000;stop-opacity:1"
+     d="m 4,8 a 1,1 0 0 0 -1,1 1,1 0 0 0 1,1 h 10.5 c 2.497126,0 4.5,2.002874 4.5,4.5 0,2.497126 -2.002874,4.5 -4.5,4.5 H 11 a 1,1 0 0 0 -1,1 1,1 0 0 0 1,1 h 3.5 C 18.078006,21 21,18.078006 21,14.5 21,10.921994 18.078006,8 14.5,8 Z M 9,3 A 1,1 0 0 0 8.2929688,3.2929688 L 3.3027344,8.2832031 A 1,1 0 0 1 4,8 H 6.4140625 L 9.7070313,4.7070312 a 1,1 0 0 0 0,-1.4140624 A 1,1 0 0 0 9,3 Z M 3.0234375,8.7949219 A 1.0001,1.0001 0 0 0 3,9 1,1 0 0 1 3.0234375,8.7949219 Z M 3,9 A 1.0001,1.0001 0 0 0 3.0234375,9.2050781 1,1 0 0 1 3,9 Z m 0.3027344,0.7167969 4.9902344,4.9902341 a 1,1 0 0 0 1.4140625,0 1,1 0 0 0 0,-1.414062 L 6.4140625,10 H 4 A 1,1 0 0 1 3.3027344,9.7167969 Z" />
+</svg>

web/src/settings_notifications.ts

@@ -4,6 +4,7 @@ import type * as tippy from "tippy.js";
 import {z} from "zod";
 
 import render_confirm_disable_all_notifications from "../templates/confirm_dialog/confirm_disable_all_notifications.hbs";
+import render_confirm_reset_stream_notifications from "../templates/confirm_dialog/confirm_reset_stream_notifications.hbs";
 import render_stream_specific_notification_row from "../templates/settings/stream_specific_notification_row.hbs";
 
 import * as banners from "./banners.ts";
@@ -21,6 +22,7 @@ import * as settings_ui from "./settings_ui.ts";
 import {realm} from "./state_data.ts";
 import * as stream_data from "./stream_data.ts";
 import * as stream_settings_api from "./stream_settings_api.ts";
+import type {SubData} from "./stream_settings_api.ts";
 import * as stream_settings_data from "./stream_settings_data.ts";
 import {stream_specific_notification_settings_schema} from "./stream_types.ts";
 import * as sub_store from "./sub_store.ts";
@@ -268,6 +270,44 @@ function render_customize_stream_notifications_widget(): void {
     customize_stream_notifications_widget.setup();
 }
 
+export function do_reset_stream_notifications(elem: HTMLElement, sub: StreamSubscription): void {
+    const data: SubData = [{stream_id: sub.stream_id, property: "is_muted", value: false}];
+    for (const [per_stream_setting_name, global_setting_name] of Object.entries(
+        settings_config.generalize_stream_notification_setting,
+    )) {
+        data.push({
+            stream_id: sub.stream_id,
+            property: stream_specific_notification_settings_schema
+                .keyof()
+                .parse(per_stream_setting_name),
+            value: user_settings[global_setting_name],
+        });
+    }
+
+    stream_settings_api.bulk_set_stream_property(
+        data,
+        $(elem).closest(".subsection-parent").find(".alert-notification"),
+    );
+}
+
+function reset_stream_notifications(elem: HTMLElement): void {
+    const $row = $(elem).closest(".stream-notifications-row");
+    const stream_id = Number.parseInt($row.attr("data-stream-id")!, 10);
+    const sub = sub_store.get(stream_id);
+    assert(sub !== undefined);
+
+    const html_body = render_confirm_reset_stream_notifications({sub});
+
+    confirm_dialog.launch({
+        html_heading: $t_html({defaultMessage: "Reset to default notifications?"}),
+        html_body,
+        id: "confirm_reset_stream_notifications_modal",
+        on_click() {
+            do_reset_stream_notifications(elem, sub);
+        },
+    });
+}
+
 export function set_up(settings_panel: SettingsPanel): void {
     const $container = $(settings_panel.container);
     const settings_object = settings_panel.settings_object;
@@ -570,4 +610,12 @@ export function initialize(): void {
             $row.closest(".subsection-parent").find(".alert-notification"),
         );
     });
+
+    $("body").on(
+        "click",
+        "#stream-specific-notify-table .reset_stream_notifications",
+        function on_click(this: HTMLElement) {
+            reset_stream_notifications(this);
+        },
+    );
 }

web/src/stream_edit.ts

@@ -35,6 +35,7 @@ import * as scroll_util from "./scroll_util.ts";
 import * as settings_components from "./settings_components.ts";
 import * as settings_config from "./settings_config.ts";
 import * as settings_data from "./settings_data.ts";
+import * as settings_notifications from "./settings_notifications.ts";
 import * as settings_org from "./settings_org.ts";
 import type {CurrentUser} from "./state_data.ts";
 import {current_user, realm} from "./state_data.ts";
@@ -42,7 +43,6 @@ import * as stream_data from "./stream_data.ts";
 import * as stream_edit_subscribers from "./stream_edit_subscribers.ts";
 import * as stream_edit_toggler from "./stream_edit_toggler.ts";
 import * as stream_settings_api from "./stream_settings_api.ts";
-import type {SubData} from "./stream_settings_api.ts";
 import * as stream_settings_components from "./stream_settings_components.ts";
 import * as stream_settings_containers from "./stream_settings_containers.ts";
 import * as stream_settings_data from "./stream_settings_data.ts";
@@ -320,25 +320,6 @@ export function update_muting_rendering(sub: StreamSubscription): void {
     $edit_container.find(".mute-note").toggleClass("hide-mute-note", !sub.is_muted);
 }
 
-function stream_notification_reset(elem: HTMLElement): void {
-    const sub = get_sub_for_target(elem);
-    const data: SubData = [{stream_id: sub.stream_id, property: "is_muted", value: false}];
-    for (const [per_stream_setting_name, global_setting_name] of Object.entries(
-        settings_config.generalize_stream_notification_setting,
-    )) {
-        data.push({
-            stream_id: sub.stream_id,
-            property: settings_labels_schema.parse(per_stream_setting_name),
-            value: user_settings[global_setting_name],
-        });
-    }
-
-    stream_settings_api.bulk_set_stream_property(
-        data,
-        $(elem).closest(".subsection-parent").find(".alert-notification"),
-    );
-}
-
 function stream_setting_changed(elem: HTMLInputElement): void {
     const sub = get_sub_for_target(elem);
     const $status_element = $(elem).closest(".subsection-parent").find(".alert-notification");
@@ -670,7 +651,8 @@ export function initialize(): void {
         "click",
         ".subsection-parent .reset-stream-notifications-button",
         function on_click(this: HTMLElement) {
-            stream_notification_reset(this);
+            const sub = get_sub_for_target(this);
+            settings_notifications.do_reset_stream_notifications(this, sub);
         },
     );
 

web/styles/settings.css

@@ -498,13 +498,52 @@ input[type="checkbox"] {
     }
 }
 
-#stream-specific-notify-table .unmute_stream {
-    position: relative;
-    left: 3px;
-    top: 2px;
+#stream-specific-notify-table {
+    .reset_stream_notifications {
+        opacity: 0;
+        visibility: hidden;
+        transition: 0.2s ease;
+        transition-property: opacity, visibility;
 
-    &:hover {
-        cursor: pointer;
+        &:hover {
+            cursor: pointer;
+        }
+
+        &:active {
+            outline: none;
+        }
+    }
+
+    .unmute_stream {
+        &:hover {
+            cursor: pointer;
+        }
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    .stream-controls {
+        display: flex;
+        align-items: center;
+        /* This gap matches a single space character. */
+        gap: 0.4ch;
+
+        &:hover {
+            .reset_stream_notifications {
+                opacity: 1;
+                visibility: visible;
+            }
+        }
+    }
+}
+
+#confirm_reset_stream_notifications_modal {
+    .channel-privacy-type-icon {
+        padding-left: 3px;
+        padding-right: 0;
+        width: auto;
     }
 }
 

web/templates/confirm_dialog/confirm_reset_stream_notifications.hbs

@@ -0,0 +1,6 @@
+<p>
+    {{#tr}}
+    Are you sure you want to reset notifications for <z-stream></z-stream>?
+    {{#*inline "z-stream"}}{{> ../inline_decorated_channel_name stream=sub show_colored_icon=false}}{{/inline}}
+    {{/tr}}
+</p>

web/templates/settings/stream_specific_notification_row.hbs

@@ -1,5 +1,5 @@
 <tr class="stream-notifications-row" data-stream-id="{{stream.stream_id}}">
-    <td>
+    <td class="stream-controls">
         <span class="stream-privacy-original-color-{{stream.stream_id}} stream-privacy filter-icon" style="color: {{stream.color}}">
             {{> ../stream_privacy
               invite_only=stream.invite_only
@@ -7,6 +7,7 @@
         </span>
         {{stream.stream_name}}
         <i class="zulip-icon icon-button-brand zulip-icon-mute tippy-zulip-delayed-tooltip unmute_stream" role="button" tabindex="0" data-tippy-content="{{t 'Unmute' }}" aria-label="{{t 'Unmute' }}" {{#unless muted}}style="display: none;"{{/unless}}></i>
+        <i class="zulip-icon icon-button-neutral zulip-icon-reset tippy-zulip-delayed-tooltip reset_stream_notifications" role="button" tabindex="0" data-tippy-content="{{t 'Reset to default notifications' }}" aria-label="{{t 'Reset to default notifications' }}"></i>
     </td>
     {{#each stream_specific_notification_settings}}
         {{> notification_settings_checkboxes