zulip/web/templates/settings/notification_settings.hbs

<form class="notification-settings-form">
    <div class="general_notifications {{#if for_realm_settings}}settings-subsection-parent{{else}}subsection-parent{{/if}}">
        <div class="subsection-header inline-block">
            <h3>{{t "Notification triggers" }}</h3>
            {{> settings_save_discard_widget section_name="general-notify-settings" show_only_indicator=(not for_realm_settings) }}
        </div>
        <p>{{t "Configure how Zulip notifies you about new messages. In muted streams, stream notification settings apply only to unmuted topics." }}</p>
        <table class="notification-table table table-bordered wrapped-table">
            <thead>
                <tr>
                    <th rowspan="2" width="30%"></th>
                    <th colspan="2" width="28%">{{t "Desktop"}}</th>
                    <th rowspan="2" width="14%" class="{{#if show_push_notifications_tooltip.push_notifications}}control-label-disabled{{/if}}">
                        <span {{#if (not realm_push_notifications_enabled) }}class="tippy-zulip-tooltip" data-tooltip-template-id="mobile-push-notification-tooltip-template"{{/if}}>
                            {{t "Mobile"}}
                        </span>
                    </th>
                    <th rowspan="2" width="14%">{{t "Email"}}</th>
                    <th rowspan="2" width="14%">@all
                        <i class="fa fa-question-circle settings-info-icon tippy-zulip-tooltip" data-tippy-content="{{t 'Whether wildcard mentions like @all are treated as mentions for the purpose of notifications.' }}"></i>
                    </th>
                </tr>
                <tr>
                    <th>{{t "Visual"}}</th>
                    <th>{{t "Audible"}}</th>
                </tr>
            </thead>
            <tbody>
                {{#each general_settings}}
                    <tr>
                        <td>{{ this.label }}</td>
                        {{#each this.notification_settings}}
                            {{> notification_settings_checkboxes
                              setting_name=this.setting_name
                              is_checked=this.is_checked
                              is_disabled=this.is_disabled
                              is_mobile_checkbox=this.is_mobile_checkbox
                              prefix=../../prefix }}
                        {{/each}}
                    </tr>
                {{/each}}
            </tbody>
            {{#unless for_realm_settings}}
            <tbody id="stream-specific-notify-table">
            </tbody>
            {{/unless}}
        </table>
    </div>

    <div class="topic_notifications m-10 {{#if for_realm_settings}}settings-subsection-parent{{else}}subsection-parent{{/if}}">

        <div class="subsection-header inline-block">
            <h3>{{t "Topic notifications" }}
                {{> ../help_link_widget link="/help/topic-notifications" }}
            </h3>
            {{> settings_save_discard_widget section_name="topic-notifications-settings" show_only_indicator=(not for_realm_settings) }}
            <p>
                {{#tr}}
                    You will automatically follow topics that you have configured to both <z-follow>follow</z-follow> and <z-unmute>unmute</z-unmute>.
                    {{#*inline "z-follow"}}<a href="/help/follow-a-topic" target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}}
                    {{#*inline "z-unmute"}}<a href="/help/mute-a-topic" target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}}
                {{/tr}}
            </p>
        </div>

        <div class="input-group">
            <label for="automatically_follow_topics_policy" class="dropdown-title">{{ settings_label.automatically_follow_topics_policy }}</label>
            <select name="automatically_follow_topics_policy" class="setting_automatically_follow_topics_policy prop-element settings_select bootstrap-focus-style"
              id="{{prefix}}automatically_follow_topics_policy" data-setting-widget-type="number">
                {{> dropdown_options_widget option_values=automatically_follow_topics_policy_values}}
            </select>
        </div>

        <div class="input-group">
            <label for="automatically_unmute_topics_in_muted_streams_policy" class="dropdown-title">{{ settings_label.automatically_unmute_topics_in_muted_streams_policy }}</label>
            <select name="automatically_unmute_topics_in_muted_streams_policy" class="setting_automatically_unmute_topics_in_muted_streams_policy prop-element settings_select bootstrap-focus-style"
              id="{{prefix}}automatically_unmute_topics_in_muted_streams_policy" data-setting-widget-type="number">
                {{> dropdown_options_widget option_values=automatically_unmute_topics_in_muted_streams_policy_values}}
            </select>
        </div>
    </div>

    <div class="desktop_notifications m-10 {{#if for_realm_settings}}settings-subsection-parent{{else}}subsection-parent{{/if}}">

        <div class="subsection-header inline-block">
            <h3>{{t "Desktop message notifications" }}
                {{> ../help_link_widget link="/help/desktop-notifications" }}
            </h3>
            {{> settings_save_discard_widget section_name="desktop-message-settings" show_only_indicator=(not for_realm_settings) }}
        </div>

        {{#unless for_realm_settings}}
        <p><a class="send_test_notification">{{t "Test desktop notification" }}</a></p>
        {{/unless}}

        {{#each notification_settings.desktop_notification_settings}}
            {{> settings_checkbox
              setting_name=this
              is_checked=(lookup ../settings_object this)
              label=(lookup ../settings_label this)
              prefix=../prefix}}
        {{/each}}

        <label for="{{prefix}}notification_sound">
            {{t "Notification sound" }}
        </label>

        <div class="input-group input-element-with-control {{#unless enable_sound_select}}control-label-disabled{{/unless}}">
            <select name="notification_sound" class="setting_notification_sound prop-element settings_select bootstrap-focus-style" id="{{prefix}}notification_sound" data-setting-widget-type="string"
              {{#unless enable_sound_select}}
              disabled
              {{/unless}}>
                <option value="none">{{t "None" }}</option>
                {{#each settings_object.available_notification_sounds}}
                    <option value="{{ this }}">{{ this }}</option>
                {{/each}}
            </select>
            <span class="play_notification_sound">
                <i class="fa fa-play-circle" aria-label="{{t 'Play sound' }}"></i>
            </span>
        </div>

        <div class="input-group">
            <label for="desktop_icon_count_display" class="dropdown-title">{{ settings_label.desktop_icon_count_display }}</label>
            <select name="desktop_icon_count_display" class="setting_desktop_icon_count_display prop-element settings_select bootstrap-focus-style" id="{{prefix}}desktop_icon_count_display" data-setting-widget-type="number">
                {{> dropdown_options_widget option_values=desktop_icon_count_display_values}}
            </select>
        </div>
    </div>

    <div class="mobile_notifications m-10 {{#if for_realm_settings}}settings-subsection-parent{{else}}subsection-parent{{/if}}">

        <div class="subsection-header inline-block">
            <h3>{{t "Mobile message notifications" }}
                {{> ../help_link_widget link="/help/mobile-notifications" }}
            </h3>
            {{> settings_save_discard_widget section_name="mobile-message-settings" show_only_indicator=(not for_realm_settings) }}
        </div>

        {{#each notification_settings.mobile_notification_settings}}
            {{> settings_checkbox
              setting_name=this
              is_checked=(lookup ../settings_object this)
              label=(lookup ../settings_label this)
              show_push_notifications_tooltip=(lookup ../show_push_notifications_tooltip this)
              prefix=../prefix}}
        {{/each}}
    </div>

    <div class="email_message_notifications m-10 {{#if for_realm_settings}}settings-subsection-parent{{else}}subsection-parent{{/if}}">

        <div class="subsection-header inline-block">
            <h3>{{t "Email message notifications" }}
                {{> ../help_link_widget link="/help/email-notifications" }}
            </h3>
            {{> settings_save_discard_widget section_name="email-message-settings" show_only_indicator=(not for_realm_settings) }}
        </div>

        <div class="input-group time-limit-setting">

            <label for="email_notifications_batching_period">
                {{t "Delay before sending message notification emails" }}
            </label>
            <select name="email_notifications_batching_period_seconds" class="setting_email_notifications_batching_period_seconds prop-element settings_select bootstrap-focus-style" id="{{prefix}}email_notifications_batching_period_seconds" data-setting-widget-type="time-limit">
                {{#each email_notifications_batching_period_values}}
                    <option value="{{ this.value }}">{{ this.description }}</option>
                {{/each}}
            </select>
            <div class="dependent-settings-block">
                <label for="email_notification_batching_period_edit_minutes" class="inline-block">
                    {{t 'Delay period (minutes)' }}:
                </label>
                <input type="text"
                  name="email_notification_batching_period_edit_minutes"
                  class="email_notification_batching_period_edit_minutes time-limit-custom-input"
                  data-setting-widget-type="time-limit"
                  autocomplete="off"
                  id="{{prefix}}email_notification_batching_period_edit_minutes"/>
            </div>
        </div>

        <div class="input-group">
            <label for="realm_name_in_email_notifications_policy" class="dropdown-title">{{ settings_label.realm_name_in_email_notifications_policy }}</label>
            <select name="realm_name_in_email_notifications_policy" class="setting_realm_name_in_email_notifications_policy prop-element settings_select bootstrap-focus-style" id="{{prefix}}realm_name_in_email_notifications_policy" data-setting-widget-type="number">
                {{> dropdown_options_widget option_values=realm_name_in_email_notifications_policy_values}}
            </select>
        </div>

        {{#each notification_settings.email_message_notification_settings}}
            {{> settings_checkbox
              setting_name=this
              is_checked=(lookup ../settings_object this)
              label=(lookup ../settings_label this)
              prefix=../prefix}}
        {{/each}}
    </div>

    <div class="other_email_notifications m-10 {{#if for_realm_settings}}settings-subsection-parent{{else}}subsection-parent{{/if}}">

        <div class="subsection-header inline-block">
            <h3>{{t "Other emails" }}</h3>
            {{> settings_save_discard_widget section_name="other-emails-settings" show_only_indicator=(not for_realm_settings) }}
        </div>
        {{#each notification_settings.other_email_settings}}
            {{> settings_checkbox
              setting_name=this
              is_checked=(lookup ../settings_object this)
              label=(lookup ../settings_label this)
              prefix=../prefix}}
        {{/each}}
    </div>
</form>