zulip/static/templates/settings/notification_settings.hbs

<form class="notification-settings-form">
    <div class="general_notifications subsection-parent">
        <h3 class="inline-block">{{t "Notification triggers" }}</h3>
        <div class="alert-notification general-notify-settings-status"></div>
        <p>{{t "Configure how Zulip notifies you about new messages." }}</p>
        <table class="notification-table table table-condensed 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}}">
                        {{t "Mobile"}}
                        {{#if (not page_params.realm_push_notifications_enabled) }}
                        <i class="fa fa-question-circle settings-info-icon tippy-zulip-tooltip" data-tippy-content="{{t 'Mobile push notifications are not configured on this server.' }}"></i>
                        {{/if}}
                    </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 "Audio"}}</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
                      prefix=../../prefix }}
                    {{/each}}
                </tr>
                {{/each}}
            </tbody>
            <tbody id="stream-specific-notify-table">
                {{> ../settings/stream_specific_notification_row }}
            </tbody>
        </table>
    </div>

    <div class="desktop_notifications m-10 inline-block subsection-parent">

        <h3 class="inline-block">{{t "Desktop message notifications" }}</h3>
        <div class="alert-notification"></div>

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

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

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

        <div class="input-group {{#unless enable_sound_select}}control-label-disabled{{/unless}}">
            <select name="notification_sound" class="setting_notification_sound" data-setting-widget-type="string"
              {{#unless enable_sound_select}}
              disabled
              {{/unless}}>
                <option value="none">{{t "None" }}</option>
                {{#each user_settings.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"
              data-setting-widget-type="number">
                {{> dropdown_options_widget option_values=desktop_icon_count_display_values}}
            </select>
        </div>
    </div>

    <div class="mobile_notifications m-10 inline-block subsection-parent">

        <h3 class="inline-block">{{t "Mobile message notifications" }}</h3>
        <div class="alert-notification"></div>

        {{#each notification_settings.mobile_notification_settings}}
        {{> settings_checkbox
          setting_name=this
          is_checked=(lookup ../user_settings 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 inline-block subsection-parent">

        <h3 class="inline-block">{{t "Email message notifications" }}</h3>
        <div class="alert-notification"></div>

        <label for="email_notifications_batching_period">
            {{t "Batching period for email notifications" }}
        </label>

        <div class="input-group">
            <select name="email_notifications_batching_period_seconds" id="email_notifications_batching_period" data-setting-widget-type="number">
                {{#each email_notifications_batching_period_values}}
                <option value="{{ this.value }}">{{ this.description }}</option>
                {{/each}}
            </select>
        </div>

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

    <div class="other_email_notifications m-10 inline-block subsection-parent">

        <h3 class="inline-block">{{t "Other emails" }}</h3>
        <div class="alert-notification"></div>
        {{#each notification_settings.other_email_settings}}
        {{> settings_checkbox
          setting_name=this
          is_checked=(lookup ../user_settings this)
          label=(lookup ../settings_label this)
          prefix=../prefix}}
        {{/each}}
    </div>
</form>