snapshot of https://github.com/zulip/zulip.git @ 48c69911c7dd4e03b20552eb3bd77ad8151c1357 (2026-09-15)

web/templates/about_zulip.hbs

@@ -0,0 +1,34 @@
+<div id="about-zulip" class="overlay flex" tabindex="-1" role="dialog" data-overlay="about-zulip" aria-label="{{t 'About Zulip' }}" aria-hidden="true">
+    <div class="overlay-content overlay-container">
+        <button type="button" class="exit" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
+        <div class="overlay-body">
+            <div class="about-zulip-logo">
+                <a target="_blank" rel="noopener noreferrer" href="https://zulip.com"><img src="../../static/images/logo/zulip-org-logo.svg" alt="{{t 'Zulip' }}" /></a>
+            </div>
+            <div class="about-zulip-version">
+                <strong>Zulip Server</strong>
+                <div class="zulip-version-info">
+                    <span>{{t "Version {zulip_version}" }}</span>
+                    <span class="copy-button tippy-zulip-tooltip zulip-version" data-tippy-content="{{t 'Copy version' }}" data-tippy-placement="right" data-clipboard-text="{{zulip_version}}">
+                        <i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
+                    </span>
+                </div>
+                {{#if is_fork}}
+                <div class="zulip-merge-base-info">
+                    <span>{{t "Forked from upstream at {zulip_merge_base}" }}</span>
+                    <span class="copy-button tippy-zulip-tooltip zulip-merge-base" data-tippy-content="{{t 'Copy version' }}" data-tippy-placement="right" data-clipboard-text="{{zulip_merge_base}}">
+                        <i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
+                    </span>
+                </div>
+                {{/if}}
+            </div>
+            <p>
+                Copyright 2012–2015 Dropbox, Inc., 2015–2021 Kandra Labs, Inc., and contributors.
+            </p>
+            <p>
+                Zulip is <a target="_blank" rel="noopener noreferrer" href="https://github.com/zulip/zulip#readme">open-source software</a>,
+                distributed under the Apache 2.0 license.
+            </p>
+        </div>
+    </div>
+</div>

web/templates/add_poll_modal.hbs

@@ -0,0 +1,13 @@
+<form class="modal-form" id="add-poll-form">
+    <label class="poll-label">{{t "Question"}}</label>
+    <div class="poll-question-input-container">
+        <input type="text" id="poll-question-input" autocomplete="off" class="modal_text_input" placeholder="{{t 'Your question'}}" />
+    </div>
+    <label class="poll-label">{{t "Options"}}</label>
+    <p>{{t "Anyone can add more options after the poll is posted."}}</p>
+    <ul class="poll-options-list" data-simplebar data-simplebar-tab-index="-1">
+        {{> poll_modal_option }}
+        {{> poll_modal_option }}
+        {{> poll_modal_option }}
+    </ul>
+</form>

web/templates/add_saved_snippet_modal.hbs

@@ -0,0 +1,10 @@
+<div id="add-new-saved-snippet-modal">
+    <form class="modal-form" id="add-new-saved-snippet-form">
+        <label for="title" class="modal-field-label">{{t "Title" }}</label>
+        <input id="new-saved-snippet-title" type="text" name="title" class="modal_text_input saved-snippet-title" value="" autocomplete="off" spellcheck="false" autofocus="autofocus"/>
+        <div>{{t "Content" }}</div>
+        <textarea class="modal-textarea saved-snippet-content" rows="4">
+            {{~prepopulated_content~}}
+        </textarea>
+    </form>
+</div>

web/templates/add_todo_list_modal.hbs

@@ -0,0 +1,13 @@
+<form class="modal-form" id="add-todo-form" class="new-style">
+    <label class="todo-label">{{t "To-do list title" }}</label>
+    <div class="todo-title-input-container">
+        <input type="text" id="todo-title-input" autocomplete="off" value="{{t 'Task list' }}" class="modal_text_input" />
+    </div>
+    <label class="todo-label">{{t "Tasks" }}</label>
+    <p>{{t "Anyone can add more tasks after the to-do list is posted."}}</p>
+    <ul class="todo-options-list" data-simplebar data-simplebar-tab-index="-1">
+        {{> todo_modal_task }}
+        {{> todo_modal_task }}
+        {{> todo_modal_task }}
+    </ul>
+</form>

web/templates/blueslip_stacktrace.hbs

@@ -0,0 +1,37 @@
+{{#each errors}}
+    <div class="stacktrace-header">
+        <div class="warning-symbol">
+            <i class="fa fa-exclamation-triangle"></i>
+        </div>
+        <div class="message">{{#unless @first}}caused by {{/unless}}<strong>{{name}}:</strong> {{ message }}</div>
+        {{#if @first}}
+            <div class="exit"></div>
+        {{/if}}
+    </div>
+    {{#if more_info}}
+        <div class="stacktrace-more-info">{{more_info}}</div>
+    {{/if}}
+    <div class="stacktrace-content">
+        {{#each stackframes}}
+            <div data-full-path="{{ full_path }}" data-line-no="{{ line_number }}">
+                <div class="stackframe">
+                    <i class="fa fa-caret-right expand"></i>
+                    <span class="subtle">at</span>
+                    {{#if function_name}}
+                    {{ function_name.scope }}<b>{{ function_name.name }}</b>
+                    {{/if}}
+                    <span class="subtle">{{ show_path }}:{{ line_number }}</span>
+                </div>
+                <div class="code-context" style="display: none">
+                    <div class="code-context-content">
+                        {{~#unless (eq context undefined)~}}
+                            {{~#each context~}}
+                                <div {{#if focus}}class="focus-line"{{/if}}><span class="line-number">{{ line_number }}</span> {{ line }}</div>
+                            {{~/each~}}
+                        {{~/unless~}}
+                    </div>
+                </div>
+            </div>
+        {{/each}}
+    </div>
+{{/each}}

web/templates/bookend.hbs

@@ -0,0 +1,74 @@
+{{! Client-side Handlebars template for rendering the trailing bookend. }}
+<div class="{{#if is_trailing_bookend}}trailing_bookend {{/if}}bookend">
+    {{#if is_spectator}}
+        <span class="recent-topics-link bookend-label">
+            <a href="#recent">{{t "Browse recent conversations" }}</a>
+        </span>
+    {{else}}
+        {{#if deactivated}}
+            <span class="stream-status bookend-label">
+                {{t "This channel has been archived." }}
+            </span>
+        {{else if subscribed }}
+            <span class="stream-status bookend-label">
+                {{#tr}}
+                    You subscribed to <z-stream-name></z-stream-name>. <channel-settings-link></channel-settings-link>
+                    {{#*inline "z-stream-name"}}{{> stream_privacy . }} {{stream_name}}{{/inline}}
+                    {{#*inline "channel-settings-link"}} <a class="bookend-channel-settings-link" href="#channels/{{stream_id}}/{{stream_name}}/personal">{{t 'Manage channel settings'}}</a>{{/inline}}
+                {{/tr}}
+            </span>
+        {{else if just_unsubscribed }}
+            {{#if is_trailing_bookend}}
+                <div class="not-subscribed-banner banner banner-info">
+                    <span class="banner-content">
+                        <span class="banner-label">
+                            {{#tr}}
+                                Because you aren't subscribed to <z-stream-name></z-stream-name>, you won't see new messages, reactions, and other updates.
+                                {{#*inline "z-stream-name"}}{{> stream_privacy . }} {{stream_name}}{{/inline}}
+                            {{/tr}}
+                        </span>
+                        <span class="banner-action-buttons">
+                            <button class="load-newer-messages-button action-button action-button-borderless-info" type="button">
+                                <span class="action-button-label">{{t 'Load updates'}}</span>
+                            </button>
+                            {{#if can_subscribe}}
+                                <button class="stream_sub_unsub_button action-button action-button-quiet-info" type="button">
+                                    <span class="action-button-label">{{t 'Subscribe'}}</span>
+                                </button>
+                            {{/if}}
+                        </span>
+                    </span>
+                </div>
+            {{else}}
+                <span class="stream-status bookend-label">
+                    {{#tr}}
+                        You unsubscribed from <z-stream-name></z-stream-name>. <channel-settings-link></channel-settings-link>
+                        {{#*inline "z-stream-name"}}{{> stream_privacy . }} {{stream_name}}{{/inline}}
+                        {{#*inline "channel-settings-link"}} <a class="bookend-channel-settings-link" href="#channels/{{stream_id}}/{{stream_name}}/general">{{t 'View in channel settings'}}</a>{{/inline}}
+                    {{/tr}}
+                </span>
+            {{/if}}
+        {{else}}
+            <div class="not-subscribed-banner banner banner-info">
+                <span class="banner-content">
+                    <span class="banner-label">
+                        {{#tr}}
+                            Because you aren't subscribed to <z-stream-name></z-stream-name>, you won't see new messages, reactions, and other updates.
+                            {{#*inline "z-stream-name"}}{{> stream_privacy . }} {{stream_name}}{{/inline}}
+                        {{/tr}}
+                    </span>
+                    <span class="banner-action-buttons">
+                        <button class="load-newer-messages-button action-button action-button-borderless-info" type="button">
+                            <span class="action-button-label">{{t 'Load updates'}}</span>
+                        </button>
+                        {{#if can_subscribe}}
+                            <button class="stream_sub_unsub_button action-button action-button-quiet-info" type="button">
+                                <span class="action-button-label">{{t 'Subscribe'}}</span>
+                            </button>
+                        {{/if}}
+                    </span>
+                </span>
+            </div>
+        {{/if}}
+    {{/if}}
+</div>

web/templates/buddy_list/section_header.hbs

@@ -0,0 +1,8 @@
+<i class="buddy-list-section-toggle section-toggle-tooltip-target zulip-icon zulip-icon-heading-triangle-right {{#if is_collapsed}}rotate-icon-right{{else}}rotate-icon-down{{/if}}" tabindex="0" role="button"></i>
+<h5 id="{{id}}" class="buddy-list-heading no-style hidden-for-spectators">
+    <span class="buddy-list-heading-text">{{header_text}}</span>
+    {{!-- Hide the count until we have fetched data to display the correct count --}}
+    <span class="buddy-list-heading-user-count-with-parens hide">
+        (<span class="buddy-list-heading-user-count"></span>)
+    </span>
+</h5>

web/templates/buddy_list/title_tooltip.hbs

@@ -0,0 +1,4 @@
+{{#tr}}
+Filter {total_user_count, plural, =1 {1 person} other {# people}}
+{{/tr}}
+{{tooltip_hotkey_hints "W"}}

web/templates/buddy_list/view_all_subscribers.hbs

@@ -0,0 +1,5 @@
+<a class="right-sidebar-wrappable-text-container" href="{{stream_edit_hash}}">
+    <span class="right-sidebar-wrappable-text-inner">
+        {{t "View all subscribers" }}
+    </span>
+</a>

web/templates/buddy_list/view_all_users.hbs

@@ -0,0 +1,5 @@
+<a class="right-sidebar-wrappable-text-container" href="#organization/users">
+    <span class="right-sidebar-wrappable-text-inner">
+        {{t "View all users" }}
+    </span>
+</a>

web/templates/buddy_list_tooltip_content.hbs

@@ -0,0 +1,14 @@
+<div class="buddy_list_tooltip_content">
+    <div>
+        {{first_line}}
+        {{#if show_you}}
+        <span class="my_user_status">{{t "(you)" }}</span>
+        {{/if}}
+    </div>
+    {{#if second_line}}
+        <div class="tooltip-inner-content {{#if is_deactivated}}italic{{/if}}" >{{second_line}}</div>
+    {{/if}}
+    {{#if third_line}}
+        <div class="tooltip-inner-content {{#if is_deactivated}}italic{{/if}}">{{third_line}}</div>
+    {{/if}}
+</div>

web/templates/change_email_modal.hbs

@@ -0,0 +1,5 @@
+<form class="modal-form" id="change_email_form">
+    <p>{{t "You will receive a confirmation email at the new address you enter."}}</p>
+    <label for="change-email-form-input-email" class="modal-field-label">{{t "New email" }}</label>
+    <input id="change-email-form-input-email" type="text" name="email" class="modal_text_input" value="{{delivery_email}}" autocomplete="off" spellcheck="false" autofocus="autofocus"/>
+</form>

web/templates/change_visibility_policy_button_tooltip.hbs

@@ -0,0 +1,15 @@
+<div id="change_visibility_policy_button_tooltip">
+    <strong>{{t 'Configure topic notifications' }}</strong>
+    <div class="tooltip-inner-content italic">
+        <span>
+            {{#if should_render_privacy_icon}}
+                {{#tr}}
+                    Notifications are based on your configuration for <z-stream-name></z-stream-name>.
+                    {{#*inline "z-stream-name"}}<span class="tooltip-privacy-icon">{{> stream_privacy . }}<span class="privacy-tooltip-stream-name">{{name}}</span></span>{{/inline}}
+                {{/tr}}
+            {{else}}
+                {{current_visibility_policy_str}}
+            {{/if}}
+        </span>
+    </div>
+</div>

web/templates/channel_list_item.hbs

@@ -0,0 +1,24 @@
+<li class="stream-list-item modal-list-item" role="presentation" data-stream-id="{{stream.stream_id}}">
+    <div class="modal-channel-list-row hidden-remove-button-row">
+        <span class="view-stream-card modal-channel-list-row-content list-row-content" data-stream-id="{{stream.stream_id}}" tabindex="0">
+            <span class="stream-privacy-original-color-{{stream.stream_id}} stream-privacy filter-icon" style="color: {{stream.color}}">
+                {{> stream_privacy stream }}
+            </span>
+            <span class="stream-name list-item-name">{{stream.name}}</span>
+        </span>
+        <div class="remove-button-wrapper">
+            {{#if show_unsubscribe_button}}
+                {{#if show_private_stream_unsub_tooltip}}
+                    {{> components/icon_button  icon="close" custom_classes="hidden-remove-button remove-button tippy-zulip-tooltip" intent="danger" aria-label=(t "Unsubscribe") data-tippy-content=(t "Use channel settings to unsubscribe from private channels.") }}
+                {{else if show_last_user_in_private_stream_unsub_tooltip}}
+                    {{> components/icon_button  icon="close" custom_classes="hidden-remove-button remove-button tippy-zulip-tooltip" intent="danger" aria-label=(t "Unsubscribe") data-tippy-content=(t "Use channel settings to unsubscribe the last user from a private channel.") }}
+                {{else}}
+                    {{> components/icon_button  icon="close" custom_classes="hidden-remove-button remove-button tippy-zulip-delayed-tooltip" intent="danger" aria-label=(t "Unsubscribe") data-tippy-content=(t "Unsubscribe") }}
+                {{/if}}
+            {{/if}}
+            {{#if can_manage_folder}}
+                {{> components/icon_button  icon="close" custom_classes="hidden-remove-button remove-button tippy-zulip-delayed-tooltip" intent="danger" aria-label=(t "Remove channel") data-tippy-content=(t "Remove channel") }}
+            {{/if}}
+        </div>
+    </div>
+</li>

web/templates/channel_message_link.hbs

@@ -0,0 +1,21 @@
+{{#if is_empty_string_topic}}
+<a class="message-link" href="{{href}}">
+    {{~!-- squash whitespace --~}}
+    {{#if stream~}}
+    {{~> decorated_channel_name stream=stream inline_with_text=true show_colored_icon=false}}
+    {{~else~}}
+    #{{channel_name}}
+    {{~/if}} &gt; <span class="empty-topic-display">{{{topic_display_name_html}}}</span> @ 💬
+    {{~!-- squash whitespace --~}}
+</a>
+{{~else}}
+<a class="message-link" href="{{href}}">
+    {{~!-- squash whitespace --~}}
+    {{#if stream~}}
+    {{~> decorated_channel_name stream=stream inline_with_text=true show_colored_icon=false}}
+    {{~else~}}
+    #{{channel_name}}
+    {{~/if}} &gt; {{{topic_display_name_html}}} @ 💬
+    {{~!-- squash whitespace --~}}
+</a>
+{{~/if}}

web/templates/code_buttons_container.hbs

@@ -0,0 +1,11 @@
+<div class="code-buttons-container">
+    <span class="copy_codeblock copy-button copy-button-square" data-tippy-content="{{t 'Copy code' }}" aria-label="{{t 'Copy code' }}" role="button">
+        <i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
+    </span>
+    {{~#if show_playground_button~}}
+    {{! Display the "view code in playground" option for code blocks}}
+    <span class="code_external_link">
+        <i class="zulip-icon zulip-icon-external-link playground-links-popover-container"></i>
+    </span>
+    {{~/if~}}
+</div>

web/templates/components/action_button.hbs

@@ -0,0 +1,10 @@
+<button type="{{#if type}}{{type}}{{else}}button{{/if}}" {{#if id}}id="{{id}}"{{/if}} class="{{#if custom_classes}}{{custom_classes}} {{/if}}action-button action-button-{{variant}}-{{intent}} {{#if hidden}}hide{{/if}}" {{#if data-tippy-content}}data-tippy-content="{{data-tippy-content}}"{{/if}} {{#if data-tooltip-template-id}}data-tooltip-template-id="{{data-tooltip-template-id}}"{{/if}} tabindex="0" {{#if aria-label}}aria-label="{{aria-label}}"{{/if}}
+  {{#if disabled}}disabled{{/if}}
+  >
+    {{#if icon}}
+    <i class="zulip-icon zulip-icon-{{icon}}" aria-hidden="true"></i>
+    {{/if}}
+    {{#if label}}
+    <span class="action-button-label">{{label}}</span>
+    {{/if}}
+</button>

web/templates/components/banner.hbs

@@ -0,0 +1,30 @@
+<div {{#if process}}data-process="{{process}}"{{/if}} class="{{#if custom_classes}}{{custom_classes}} {{/if}}banner banner-{{intent}}">
+    <span class="banner-content">
+        <span class="banner-label">
+            {{#if label}}
+                {{label}}
+            {{else}}
+                {{> @partial-block .}}
+            {{/if}}
+        </span>
+        {{#unless (eq buttons undefined)}}
+            {{#unless (eq buttons.length 0)}}
+            <span class="banner-action-buttons">
+                {{!-- squash whitespace so :empty selector works when no buttons --}}
+                {{~!-- squash whitespace --~}}
+                {{#each buttons}}
+                    {{#if this.intent}}
+                        {{> action_button .}}
+                    {{else}}
+                        {{> action_button . intent=../intent}}
+                    {{/if}}
+                {{/each}}
+                {{~!-- squash whitespace --~}}
+            </span>
+            {{/unless}}
+        {{/unless}}
+    </span>
+    {{#if close_button}}
+        {{> icon_button custom_classes="banner-close-action banner-close-button" icon="close" intent=intent}}
+    {{/if}}
+</div>

web/templates/components/icon_button.hbs

@@ -0,0 +1,7 @@
+<button type="button" {{#if id}}id="{{id}}"{{/if}} class="{{#if custom_classes}}{{custom_classes}} {{/if}}icon-button {{#if squared}}icon-button-square {{/if}}icon-button-{{intent}} {{#if hidden}}hide{{/if}}" {{#if data-tooltip-template-id}}data-tooltip-template-id="{{data-tooltip-template-id}}"{{/if}} tabindex="0" {{#if aria-label}}aria-label="{{aria-label}}"{{/if}}
+  {{#if data-tippy-content}}data-tippy-content="{{data-tippy-content}}"{{/if}}
+  {{#if data-micromodal-close}}data-micromodal-close{{/if}}
+  {{#if disabled}}disabled{{/if}}
+  >
+    <i class="zulip-icon zulip-icon-{{icon}}" aria-hidden="true"></i>
+</button>

web/templates/components/input_wrapper.hbs

@@ -0,0 +1,21 @@
+{{!--
+This is used to wrap any input element that needs to be styled as a Zulip input.
+Usage example:
+{{#> components/input_wrapper . input_type="filter-input" custom_classes="inbox-search-wrapper" icon="search" input_button_icon="close"}}
+<input type="text" id="{{INBOX_SEARCH_ID}}" class="input-element" value="{{search_val}}" autocomplete="off" placeholder="{{t 'Filter' }}" />
+{{/components/input_wrapper}}
+--}}
+
+<div {{#if id}}id="{{id}}"{{/if}} class="input-element-wrapper{{#if input_type}} {{input_type}}{{/if}}{{#if custom_classes}} {{custom_classes}}{{/if}}{{#if icon}} has-input-icon{{/if}}{{#if input_button_icon}} has-input-button{{/if}}">
+    {{#if icon}}
+        <i class="input-icon zulip-icon zulip-icon-{{icon}}" aria-hidden="true"></i>
+    {{/if}}
+    {{> @partial-block .}}
+    {{#if input_button_icon}}
+        {{#if (eq input_type "filter-input") }}
+            {{> icon_button custom_classes="input-button input-close-filter-button" squared=true icon=input_button_icon intent="neutral" }}
+        {{else}}
+            {{> icon_button custom_classes="input-button" squared=true icon=input_button_icon intent="neutral" }}
+        {{/if}}
+    {{/if}}
+</div>

web/templates/components/membership_banner.hbs

@@ -0,0 +1,4 @@
+{{#> banner .}}
+    {{> ../user_group_settings/user_group_membership_request_result .}}
+{{/banner}}
+

web/templates/components/showroom/filter_input.hbs

@@ -0,0 +1,3 @@
+{{#> ../input_wrapper input_type="filter-input" icon="search" input_button_icon="close"}}
+    <input class="input-element" type="text" placeholder="{{t 'Filter component' }}" />
+{{/../input_wrapper}}

web/templates/components/subscription_banner.hbs

@@ -0,0 +1,4 @@
+{{#> banner .}}
+    {{> ../stream_settings/stream_subscription_request_result .}}
+{{/banner}}
+

web/templates/compose.hbs

@@ -0,0 +1,134 @@
+<div id="compose-content">
+    {{!-- scroll to bottom button is not part of compose but
+    helps us align it at various screens sizes with
+    minimal css and no JS. We keep it `position: absolute` to prevent
+    it changing compose box layout in any way. --}}
+    <div id="scroll-to-bottom-button-container" aria-hidden="true">
+        <div id="scroll-to-bottom-button-clickable-area" data-tooltip-template-id="scroll-to-bottom-button-tooltip-template">
+            {{!-- We add a semi-transparent underlay to the scroll to bottom
+            button with the same background color as those of the stream
+            messages for better visibility against the message timestamps. --}}
+            <div id="scroll-to-bottom-button-underlay"></div>
+            {{> components/action_button id="scroll-to-bottom-button" icon="chevron-down" variant="subtle" intent="brand" }}
+        </div>
+    </div>
+    <div id="closed-compose-controls">
+        <div id="legacy-closed-compose-box">
+            <div class="reply_button_container">
+                <div class="compose-reply-button-wrapper" data-reply-button-type="selected_message">
+                    <button type="button" class="compose_reply_button"
+                      id="left_bar_compose_reply_button_big">
+                        {{t 'Compose message' }}
+                    </button>
+                </div>
+                <button type="button" class="compose_new_conversation_button"
+                  id="new_conversation_button"
+                  data-tooltip-template-id="new_stream_message_button_tooltip_template">
+                    {{t 'Start new conversation' }}
+                </button>
+            </div>
+            <span class="mobile_button_container">
+                <button type="button" class="compose_mobile_button"
+                  id="left_bar_compose_mobile_button_big"
+                  data-tooltip-template-id="left_bar_compose_mobile_button_tooltip_template">
+                    +
+                </button>
+            </span>
+            {{#unless embedded }}
+            <span class="new_direct_message_button_container">
+                <button type="button" class="compose_new_direct_message_button"
+                  id="new_direct_message_button"
+                  data-tooltip-template-id="new_direct_message_button_tooltip_template">
+                    {{t 'New direct message' }}
+                </button>
+            </span>
+            {{/unless}}
+        </div>
+    </div>
+    <div class="message_comp">
+        <div id="compose_banners" data-simplebar data-simplebar-tab-index="-1"></div>
+        <div class="composition-area">
+            <form id="send_message_form" action="/json/messages" method="post">
+                <div class="compose_table">
+                    <div id="compose_top">
+                        {{!-- We start with the low-attention-recipient-row class
+                        on the template to avoid showing the transition
+                        when the compose box first opens. Note that this
+                        class is immediately removed when it's not used,
+                        so, for example, opening the compose box from
+                        Inbox view does not cause any flash of unwanted
+                        styling. --}}
+                        <div id="compose-recipient" class="low-attention-recipient-row">
+                            {{> dropdown_widget_wrapper
+                              widget_name="compose_select_recipient"}}
+                            <div class="topic-marker-container">
+                                <a role="button" class="conversation-arrow zulip-icon zulip-icon-chevron-right"></a>
+                            </div>
+                            <div id="compose-channel-recipient">
+                                <input type="text" name="stream_message_recipient_topic" id="stream_message_recipient_topic" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" />
+                                <span id="topic-not-mandatory-placeholder" class="placeholder">
+                                    {{> topic_not_mandatory_placeholder_text empty_string_topic_display_name=empty_string_topic_display_name}}
+                                </span>
+                                <button type="button" id="recipient_box_clear_topic_button" class="compose-new-recipient-button" tabindex="-1">
+                                    <i class="zulip-icon zulip-icon-square-plus"></i>
+                                </button>
+                            </div>
+                            <div id="compose-direct-recipient" data-before="{{t 'You and' }}">
+                                <div class="pill-container">
+                                    <div class="input" contenteditable="true" id="private_message_recipient" data-no-recipients-text="{{t 'Add users' }}" ></div>
+                                    <button type="button" id="compose-new-direct-recipient-button" class="compose-new-recipient-button tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Add recipient' }}" tabindex="-1">
+                                        <i class="zulip-icon zulip-icon-square-plus"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="messagebox">
+                        <div id="message-content-container" class="surround-formatting-buttons-row">
+                            <textarea class="new_message_textarea message-textarea" name="content" id='compose-textarea' placeholder="{{t 'Compose your message here' }}" tabindex="0" aria-label="{{t 'Compose your message here…' }}"></textarea>
+                            <div id="preview-message-area-container">
+                                <div class="scrolling_list preview_message_area" data-simplebar data-simplebar-tab-index="-1" id="preview_message_area" style="display:none;">
+                                    <div class="markdown_preview_spinner"></div>
+                                    <div class="preview_content rendered_markdown"></div>
+                                </div>
+                            </div>
+                            <div class="composebox-buttons">
+                                <button type="button" class="maximize-composebox-button zulip-icon zulip-icon-maximize-diagonal" aria-label="{{t 'Maximize compose box' }}" data-tippy-content="{{t 'Maximize compose box' }}"></button>
+                                <button type="button" class="expand-composebox-button zulip-icon zulip-icon-expand-diagonal" aria-label="{{t 'Expand compose box' }}" data-tippy-content="{{t 'Expand compose box' }}"></button>
+                                <button type="button" class="collapse-composebox-button zulip-icon zulip-icon-collapse-diagonal" aria-label="{{t 'Collapse compose box' }}" data-tippy-content="{{t 'Collapse compose box' }}"></button>
+                            </div>
+                            <div class="drag"></div>
+                        </div>
+
+                        <div id="message-send-controls-container">
+                            <a id="compose-drafts-button" role="button" class="send-control-button hide-sm" tabindex=0 href="#drafts">
+                                <span class="compose-drafts-text">{{t 'Drafts' }}</span><span class="compose-drafts-count-container">(<span class="compose-drafts-count"></span>)</span>
+                            </a>
+                            <span id="compose-limit-indicator" class="message-limit-indicator"></span>
+                            <div class="message-send-controls">
+                                <button type="submit" id="compose-send-button" class="send_message compose-submit-button compose-send-or-save-button" aria-label="{{t 'Send' }}">
+                                    <img class="loader" alt="" src="" />
+                                    <i class="zulip-icon zulip-icon-send"></i>
+                                </button>
+                                <button class="send-control-button send-related-action-button" id="send_later" tabindex=0 type="button" data-tippy-content="{{t 'Send options' }}" aria-label="{{t 'Send options' }}">
+                                    <i class="zulip-icon zulip-icon-more-vertical"></i>
+                                </button>
+                            </div>
+                        </div>
+
+                        <div id="message-formatting-controls-container" class="compose-scrolling-buttons-container">
+                            {{> compose_control_buttons . }}
+                            <button type="button" class="formatting-control-scroller-button formatting-scroller-forward" aria-label="{{t 'Scroll forward' }}">
+                                <i class="scroller-forward-icon zulip-icon zulip-icon-compose-scroll-right"></i>
+                            </button>
+                            <button type="button" class="formatting-control-scroller-button formatting-scroller-backward" aria-label="{{t 'Scroll backward' }}">
+                                <i class="scroller-backward-icon zulip-icon zulip-icon-compose-scroll-left"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+        <button type="button" class="zulip-icon zulip-icon-close" id='compose_close' data-tooltip-template-id="compose_close_tooltip_template" aria-label="{{t 'Cancel compose' }}"></button>
+    </div>
+</div>

web/templates/compose_banner/automatic_new_visibility_policy_banner.hbs

@@ -0,0 +1,27 @@
+{{#> compose_banner . }}
+    <p class="banner_message">
+        {{#if followed}}
+            {{#tr}}
+                Now following <z-link></z-link>.
+                {{#*inline "z-link"~}}
+                    <a class="above_compose_banner_action_link white-space-preserve-wrap" href="{{narrow_url}}" data-message-id="{{link_msg_id}}">
+                        {{~!-- squash whitespace --~}}
+                        #{{channel_name}} &gt; <span {{#if is_empty_string_topic}}class="empty-topic-display"{{/if}}>{{topic_display_name}}</span>
+                        {{~!-- squash whitespace --~}}
+                    </a>
+                {{~/inline}}
+            {{/tr}}
+        {{else}}
+            {{#tr}}
+                Unmuted <z-link></z-link>.
+                {{#*inline "z-link"~}}
+                    <a class="above_compose_banner_action_link white-space-preserve-wrap" href="{{narrow_url}}" data-message-id="{{link_msg_id}}">
+                        {{~!-- squash whitespace --~}}
+                        #{{channel_name}} &gt; <span {{#if is_empty_string_topic}}class="empty-topic-display"{{/if}}>{{topic_display_name}}</span>
+                        {{~!-- squash whitespace --~}}
+                    </a>
+                {{~/inline}}
+            {{/tr}}
+        {{/if}}
+    </p>
+{{/compose_banner}}

web/templates/compose_banner/cannot_send_direct_message_error.hbs

@@ -0,0 +1,9 @@
+{{#> compose_banner . }}
+    <p class="banner_message">
+        {{error_message}}
+        {{#tr}}
+        <z-link>Learn more.</z-link>
+        {{#*inline "z-link"}}<a target="_blank" rel="noopener noreferrer" href="/help/restrict-direct-messages">{{> @partial-block}}</a>{{/inline}}
+        {{/tr}}
+    </p>
+{{/compose_banner}}

web/templates/compose_banner/compose_banner.hbs

@@ -0,0 +1,24 @@
+<div
+  class="main-view-banner {{banner_type}} {{classname}}"
+  {{#unless (eq user_id undefined)}}data-user-id="{{user_id}}"{{/unless}}
+  {{#unless (eq stream_id undefined)}}data-stream-id="{{stream_id}}"{{/unless}}
+  {{#if (or topic_name is_empty_string_topic)}}data-topic-name="{{topic_name}}"{{/if}}>
+    <div class="main-view-banner-elements-wrapper">
+        {{#if banner_text}}
+        <p class="banner_content">{{banner_text}}</p>
+        {{else}}
+        <div class="banner_content">{{> @partial-block .}}</div>
+        {{/if}}
+        {{#if button_text}}
+        <button class="main-view-banner-action-button{{#if hide_close_button}} right_edge{{/if}}" {{#if scheduling_message}}data-validation-trigger="schedule"{{/if}}>{{button_text}}</button>
+        {{/if}}
+        {{#if is_onboarding_banner}}
+        <button class="main-view-banner-action-button right_edge" data-action="mark-as-read">{{t "Got it"}}</button>
+        {{/if}}
+    </div>
+    {{#if hide_close_button}}
+    {{!-- hide_close_button is null by default, and false if explicitly set as false. --}}
+    {{else}}
+    <a role="button" class="zulip-icon zulip-icon-close main-view-banner-close-button" tabindex="0" aria-label="{{t 'Dismiss' }}"></a>
+    {{/if}}
+</div>

web/templates/compose_banner/compose_mention_group_warning.hbs

@@ -0,0 +1,12 @@
+{{#> compose_banner . }}
+    <p class="banner_message">
+        {{#tr}}
+            None of the members of <z-group-pill></z-group-pill> are subscribed to this channel.
+            {{#*inline "z-group-pill"}}
+                <span class="display_only_group_pill">
+                    <a data-user-group-id="{{group_id}}" class="view_user_group_mention" tabindex="0"><span class="pill-label">{{group_name}}</span></a>
+                </span>
+            {{/inline}}
+        {{/tr}}
+    </p>
+{{/compose_banner}}

web/templates/compose_banner/guest_in_dm_recipient_warning.hbs

@@ -0,0 +1,6 @@
+<div class="above_compose_banner main-view-banner warning-style {{classname}}">
+    <p class="banner_content">
+        {{banner_text}}
+    </p>
+    <a role="button" class="zulip-icon zulip-icon-close main-view-banner-close-button" tabindex="0" aria-label="{{t 'Dismiss' }}"></a>
+</div>

web/templates/compose_banner/jump_to_sent_message_conversation_banner.hbs

@@ -0,0 +1,9 @@
+{{#> compose_banner . }}
+    <p class="banner_message">
+        {{#tr}}
+        Viewing the conversation where you sent your message. To go back, use the <z-highlight>back</z-highlight>
+        button in your browser or desktop app.
+        {{#*inline "z-highlight"}}<b class="highlighted-element">{{> @partial-block}}</b>{{/inline}}
+        {{/tr}}
+    </p>
+{{/compose_banner}}

web/templates/compose_banner/long_paste_options.hbs

@@ -0,0 +1,14 @@
+<div
+  class="main-view-banner {{banner_type}} {{classname}}">
+    <div class="main-view-banner-elements-wrapper">
+        {{#if show_paste_button}}
+        <div class="banner_content">{{t 'Paste text directly or convert to a file?'}}</div>
+        <button class="main-view-banner-action-button paste-to-compose">{{t 'Paste'}}</button>
+        <button class="main-view-banner-action-button convert-to-file secondary-button right_edge">{{t 'Convert'}}</button>
+        {{else}}
+        <div class="banner_content">{{t 'Do you want to convert the pasted text into a file?'}}</div>
+        <button class="main-view-banner-action-button convert-to-file right_edge">{{t 'Yes, convert'}}</button>
+        {{/if}}
+    </div>
+    <a role="button" class="zulip-icon zulip-icon-close main-view-banner-close-button" tabindex="0" aria-label="{{t 'Dismiss' }}"></a>
+</div>

web/templates/compose_banner/message_sent_banner.hbs

@@ -0,0 +1,25 @@
+<div class="above_compose_banner main-view-banner success {{classname}}">
+    <p class="banner_content">
+        {{banner_text}}
+        {{#if message_recipient}}
+        <a class="above_compose_banner_action_link" {{#if above_composebox_narrow_url}}href="{{above_composebox_narrow_url}}"{{/if}} data-message-id="{{link_msg_id}}">
+            {{#with message_recipient}}
+            {{#if (eq message_type "channel")}}
+                {{#tr}}
+                    Go to #{channel_name} &gt; <z-topic-display-name></z-topic-display-name>
+                    {{#*inline "z-topic-display-name"}}<span {{#if is_empty_string_topic}}class="empty-topic-display"{{/if}}>{{topic_display_name}}</span>{{/inline}}
+                {{/tr}}
+            {{else}}
+                {{t 'Go to {recipient_text}' }}
+            {{/if}}
+            {{/with}}
+        </a>
+        {{/if}}
+    </p>
+    {{#if action_button_text}}
+        <button class="action-button action-button-subtle-success" data-message-id="{{link_msg_id}}">
+            <span class="action-button-label">{{ action_button_text }}</span>
+        </button>
+    {{/if}}
+    <a role="button" class="zulip-icon zulip-icon-close main-view-banner-close-button" tabindex="0" aria-label="{{t 'Dismiss' }}"></a>
+</div>

web/templates/compose_banner/not_subscribed_warning.hbs

@@ -0,0 +1,17 @@
+{{#> compose_banner . }}
+    <p class="banner_message">
+        {{#if can_subscribe_other_users}}
+            {{#if should_add_guest_user_indicator}}
+            {{#tr}}<strong>{name}</strong> <i>(guest)</i> is not subscribed to this channel. They will not be notified unless you subscribe them.{{/tr}}
+            {{else}}
+            {{#tr}}<strong>{name}</strong> is not subscribed to this channel. They will not be notified unless you subscribe them.{{/tr}}
+            {{/if}}
+        {{else}}
+            {{#if should_add_guest_user_indicator}}
+            {{#tr}}<strong>{name}</strong> <i>(guest)</i> is not subscribed to this channel. They will not be notified if you mention them.{{/tr}}
+            {{else}}
+            {{#tr}}<strong>{name}</strong> is not subscribed to this channel. They will not be notified if you mention them.{{/tr}}
+            {{/if}}
+        {{/if}}
+    </p>
+{{/compose_banner}}

web/templates/compose_banner/private_stream_warning.hbs

@@ -0,0 +1,9 @@
+{{#> compose_banner . }}
+    <p class="banner_message">
+        {{#tr}}
+            Warning: Not all subscribers of <z-audience-channel></z-audience-channel> can view <z-channel></z-channel>, a private channel.
+            {{#*inline "z-audience-channel"}}<strong>#{{audience_channel_name}}</strong>{{/inline}}
+            {{#*inline "z-channel"}}<strong>#{{channel_name}}</strong>{{/inline}}
+        {{/tr}}
+    </p>
+{{/compose_banner}}

web/templates/compose_banner/stream_does_not_exist_error.hbs

@@ -0,0 +1,10 @@
+{{#> compose_banner . }}
+    <p class="banner_message">
+        {{#tr}}
+        The channel <z-highlight>#{channel_name}</z-highlight> does not exist. Manage your subscriptions
+        <z-link>on your Channels page</z-link>.
+        {{#*inline "z-link"}}<a href='#channels/all'>{{> @partial-block}}</a>{{/inline}}
+        {{#*inline "z-highlight"}}<b class="highlighted-element">{{> @partial-block}}</b>{{/inline}}
+        {{/tr}}
+    </p>
+{{/compose_banner}}

web/templates/compose_banner/stream_wildcard_warning.hbs

@@ -0,0 +1,7 @@
+{{#> compose_banner . }}
+    <p class="banner_message">
+        {{#tr}}
+        Are you sure you want to send @-mention notifications to the <strong>{subscriber_count}</strong> users subscribed to #{channel_name}? If not, please edit your message to remove the <strong>@{wildcard_mention}</strong> mention.
+        {{/tr}}
+    </p>
+{{/compose_banner}}

web/templates/compose_banner/success_message_scheduled_banner.hbs

@@ -0,0 +1,15 @@
+<div
+  class="main-view-banner success message_scheduled_success_compose_banner"
+  data-scheduled-message-id="{{scheduled_message_id}}">
+    <div class="main-view-banner-elements-wrapper">
+        <p class="banner_content">
+            {{#if minimum_scheduled_message_delay_minutes_note}}
+                {{t 'Messages must be scheduled at least {minimum_scheduled_message_delay_minutes} minutes in the future.'}}
+            {{/if}}
+            {{t 'Your message has been scheduled for {deliver_at}.'}}
+            <a href="#scheduled">{{t "View scheduled messages"}}</a>
+        </p>
+        <button class="main-view-banner-action-button undo_scheduled_message" >{{t "Undo"}}</button>
+    </div>
+    <a role="button" class="zulip-icon zulip-icon-close main-view-banner-close-button" tabindex="0" aria-label="{{t 'Dismiss' }}"></a>
+</div>

web/templates/compose_banner/topic_moved_banner.hbs

@@ -0,0 +1,12 @@
+{{#> compose_banner . }}
+    <p class="banner_message">
+        {{#tr}}
+            The topic you were composing to (<z-link></z-link>) was moved, and the destination for your message has been updated to its new location.
+            {{#*inline "z-link"~}}
+                <a class="above_compose_banner_action_link" href="{{narrow_url}}">
+                    {{~> ../inline_topic_link_label stream=old_stream topic_display_name=orig_topic is_empty_string_topic=is_empty_string_topic~}}
+                </a>
+            {{~/inline}}
+        {{/tr}}
+    </p>
+{{/compose_banner}}

web/templates/compose_banner/topics_required_error_banner.hbs

@@ -0,0 +1,5 @@
+{{#> compose_banner . }}
+    <p class="banner_message">
+        {{> ../topics_required_error_message .}}
+    </p>
+{{/compose_banner}}

web/templates/compose_banner/unknown_zoom_user_error.hbs

@@ -0,0 +1,8 @@
+{{#> compose_banner . }}
+    <p class="banner_message">
+        {{#tr}}
+        Your Zulip account email (<z-highlight>{email}</z-highlight>) is not linked to this organization's Zoom account.
+        {{#*inline "z-highlight"}}<b class="highlighted-element">{{> @partial-block}}</b>{{/inline}}
+        {{/tr}}
+    </p>
+{{/compose_banner}}

web/templates/compose_banner/unmute_topic_banner.hbs

@@ -0,0 +1,10 @@
+{{#> compose_banner . }}
+    <p class="banner_message">
+        {{#if (eq muted_narrow "stream")}}
+            {{#tr}}Your message was sent to a channel you have muted.{{/tr}}
+        {{else if (eq muted_narrow "topic")}}
+            {{#tr}}Your message was sent to a topic you have muted.{{/tr}}
+        {{/if}}
+        {{#tr}}You will not receive notifications about new messages.{{/tr}}
+    </p>
+{{/compose_banner}}

web/templates/compose_banner/upload_banner.hbs

@@ -0,0 +1,8 @@
+<div class="upload_banner file_{{file_id}} main-view-banner {{banner_type}}">
+    <div class="moving_bar"></div>
+    <p class="upload_msg banner_content">{{banner_text}}</p>
+    {{#if is_upload_process_tracker}}
+        <button class="upload_banner_cancel_button">{{t 'Cancel' }}</button>
+    {{/if}}
+    <a role="button" class="zulip-icon zulip-icon-close main-view-banner-close-button" tabindex="0" aria-label="{{t 'Dismiss' }}"></a>
+</div>

web/templates/compose_banner/wildcard_mention_not_allowed_error.hbs

@@ -0,0 +1,15 @@
+{{#> compose_banner . }}
+    <p class="banner_message">
+        {{#if wildcard_mention_string}}
+            {{#tr}}
+            You do not have permission to use <z-highlight>@{wildcard_mention_string}</z-highlight> mentions in this channel.
+            {{#*inline "z-highlight"}}<b class="highlighted-element">{{> @partial-block}}</b>{{/inline}}
+            {{/tr}}
+        {{else}}
+            {{#tr}}
+            You do not have permission to use <z-highlight>@topic</z-highlight> mentions in this topic.
+            {{#*inline "z-highlight"}}<b class="highlighted-element">{{> @partial-block}}</b>{{/inline}}
+            {{/tr}}
+        {{/if}}
+    </p>
+{{/compose_banner}}

web/templates/compose_control_buttons.hbs

@@ -0,0 +1,69 @@
+<div class="compose-scrollable-buttons compose-control-buttons-container order-1" tabindex="-1">
+    <input type="file" class="file_input notvisible" multiple />
+    <div class="compose_control_button_container compose_button_tooltip" data-tooltip-template-id="preview-tooltip" data-tippy-maxWidth="none">
+        <a role="button" class="markdown_preview compose_control_button zulip-icon zulip-icon-preview" aria-label="{{t 'Preview mode' }}" tabindex=0></a>
+    </div>
+    <div class="compose_control_button_container compose_button_tooltip" data-tooltip-template-id="exit-preview-tooltip" data-tippy-maxWidth="none">
+        <a role="button" class="undo_markdown_preview compose_control_button zulip-icon zulip-icon-compose-edit" aria-label="{{t 'Exit preview mode' }}" tabindex=0 style="display:none;"></a>
+    </div>
+    {{#if file_upload_enabled }}
+    <div class="compose_control_button_container preview_mode_disabled disable-on-invalid-recipient compose_button_tooltip" data-tippy-content="{{t 'Upload files' }}">
+        <a role="button" class="compose_control_button compose_upload_file zulip-icon zulip-icon-attachment" aria-label="{{t 'Upload files' }}" tabindex=0></a>
+    </div>
+    {{/if}}
+    <div class="compose_control_button_container preview_mode_disabled disable-on-invalid-recipient compose_button_tooltip" data-tippy-content="{{t 'Add video call' }}">
+        <a role="button" class="compose_control_button zulip-icon zulip-icon-video-call video_link" aria-label="{{t 'Add video call' }}" tabindex=0></a>
+    </div>
+    <div class="compose_control_button_container preview_mode_disabled disable-on-invalid-recipient compose_button_tooltip" data-tippy-content="{{t 'Add voice call' }}">
+        <a role="button" class="compose_control_button zulip-icon zulip-icon-voice-call audio_link" aria-label="{{t 'Add voice call' }}" tabindex=0></a>
+    </div>
+    <div class="divider"></div>
+    <div class="compose_control_button_container preview_mode_disabled disable-on-invalid-recipient compose_button_tooltip" data-tippy-content="{{t 'Add emoji' }}">
+        <a role="button" class="compose_control_button zulip-icon zulip-icon-smile-bigger emoji_map" aria-label="{{t 'Add emoji' }}" tabindex=0></a>
+    </div>
+    <div class="compose_control_button_container preview_mode_disabled disable-on-invalid-recipient compose_button_tooltip" data-tooltip-template-id="add-global-time-tooltip" data-tippy-maxWidth="none">
+        <a role="button" class="compose_control_button zulip-icon zulip-icon-time time_pick" aria-label="{{t 'Add global time' }}" tabindex=0></a>
+    </div>
+    {{#if (or tenor_enabled giphy_enabled klipy_enabled)}}
+        {{!-- In terms of preference, Tenor > KLIPY > GIPHY. --}}
+        <div class="compose_control_button_container  preview_mode_disabled disable-on-invalid-recipient compose_button_tooltip" data-tippy-content="{{t 'Add GIF' }}">
+            <a role="button" class="compose_control_button compose-gif-icon zulip-icon zulip-icon-gif" aria-label="{{t 'Add GIF' }}" tabindex=0></a>
+        </div>
+    {{/if}}
+    {{#unless (eq message_id undefined)}}
+    <div class="compose_control_button_container preview_mode_disabled disable-on-invalid-recipient compose_button_tooltip" data-tooltip-template-id="add-saved-snippet-tooltip">
+        <a role="button" class="saved_snippets_widget saved-snippets-message-edit-widget compose_control_button zulip-icon zulip-icon-message-square-text" aria-label="{{t 'Add saved snippet' }}" data-message-id="{{message_id}}" tabindex=0></a>
+    </div>
+    {{else}}
+    <div class="compose_control_button_container preview_mode_disabled disable-on-invalid-recipient compose_button_tooltip" data-tooltip-template-id="add-saved-snippet-tooltip">
+        <a role="button" class="saved_snippets_widget saved-snippets-composebox-widget compose_control_button zulip-icon zulip-icon-message-square-text" aria-label="{{t 'Add saved snippet' }}" tabindex=0></a>
+    </div>
+    {{/unless}}
+    <div class="divider"></div>
+    <div class="compose-control-buttons-container preview_mode_disabled disable-on-invalid-recipient">
+        <a role="button" data-format-type="link" class="compose_button_tooltip compose_control_button zulip-icon zulip-icon-link formatting_button" aria-label="{{t 'Link' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tooltip-template-id="link-tooltip" data-tippy-maxWidth="none"></a>
+        <a role="button" data-format-type="bold" class="compose_button_tooltip compose_control_button zulip-icon zulip-icon-bold formatting_button" aria-label="{{t 'Bold' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tooltip-template-id="bold-tooltip" data-tippy-maxWidth="none"></a>
+        <a role="button" data-format-type="italic" class="compose_button_tooltip compose_control_button zulip-icon zulip-icon-italic formatting_button" aria-label="{{t 'Italic' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tooltip-template-id="italic-tooltip" data-tippy-maxWidth="none"></a>
+        <a role="button" data-format-type="strikethrough" class="compose_button_tooltip compose_control_button zulip-icon zulip-icon-strikethrough formatting_button" aria-label="{{t 'Strikethrough' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Strikethrough' }}"></a>
+    </div>
+    <div class="divider"></div>
+    <div class="compose-control-buttons-container preview_mode_disabled disable-on-invalid-recipient">
+        <a role="button" data-format-type="numbered" class="compose_button_tooltip compose_control_button zulip-icon zulip-icon-ordered-list formatting_button" aria-label="{{t 'Numbered list' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Numbered list' }}"></a>
+        <a role="button" data-format-type="bulleted" class="compose_button_tooltip compose_control_button zulip-icon zulip-icon-unordered-list formatting_button" aria-label="{{t 'Bulleted list' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Bulleted list' }}"></a>
+        <div class="divider"></div>
+        <a role="button" data-format-type="quote" class="compose_button_tooltip compose_control_button zulip-icon zulip-icon-quote formatting_button" aria-label="{{t 'Quote' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Quote' }}"></a>
+        <a role="button" data-format-type="spoiler" class="compose_button_tooltip compose_control_button zulip-icon zulip-icon-spoiler formatting_button" aria-label="{{t 'Spoiler' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Spoiler' }}"></a>
+        <a role="button" data-format-type="code" class="compose_button_tooltip compose_control_button zulip-icon zulip-icon-code formatting_button" aria-label="{{t 'Code' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tooltip-template-id="code-tooltip"></a>
+        <a role="button" data-format-type="latex" class="compose_button_tooltip compose_control_button zulip-icon zulip-icon-math formatting_button" aria-label="{{t 'Math (LaTeX)' }}" {{#unless preview_mode_on}} tabindex=0 {{/unless}} data-tippy-content="{{t 'Math (LaTeX)' }}"></a>
+    </div>
+    <div class="divider"></div>
+    {{#if (eq message_id undefined)}}
+    <div class="compose_control_button_container preview_mode_disabled disable-on-invalid-recipient needs-empty-compose compose_button_tooltip" data-tooltip-template-id="add-poll-tooltip" data-tippy-maxWidth="none">
+        <a role="button" class="compose_control_button zulip-icon zulip-icon-poll add-poll" aria-label="{{t 'Add poll' }}" tabindex=0></a>
+    </div>
+    <div class="compose_control_button_container preview_mode_disabled disable-on-invalid-recipient needs-empty-compose compose_button_tooltip" data-tooltip-template-id="add-todo-tooltip" data-tippy-maxWidth="none">
+        <a role="button" class="compose_control_button zulip-icon zulip-icon-todo-list add-todo-list" aria-label="{{t 'Add to-do list' }}" tabindex=0></a>
+    </div>
+    {{/if}}
+    <a role="button" class="compose_control_button compose_help_button zulip-icon zulip-icon-question compose_button_tooltip" tabindex=0 data-tippy-content="{{t 'Message formatting' }}" data-overlay-trigger="message-formatting" aria-label="{{t 'Message formatting' }}"></a>
+</div>

web/templates/compose_limit_indicator.hbs

@@ -0,0 +1 @@
+{{remaining_characters}}

web/templates/confirm_dialog/confirm_archive_channel_folder.hbs

@@ -0,0 +1 @@
+{{t "Channels in this folder will become uncategorized."}} {{t "This action cannot be undone."}}

web/templates/confirm_dialog/confirm_deactivate_custom_emoji.hbs

@@ -0,0 +1,3 @@
+<p>{{t "A deactivated emoji will remain visible in existing messages and emoji reactions, but cannot be used on new messages."}}</p>
+<p>{{t "This action cannot be undone."}}</p>
+

web/templates/confirm_dialog/confirm_deactivate_own_user.hbs

@@ -0,0 +1,3 @@
+<p>{{t "By deactivating your account, you will be logged out immediately." }}</p>
+<p>{{t "Note that any bots that you maintain will be disabled." }}</p>
+<p>{{t "Are you sure you want to deactivate your account?"}}</p>

web/templates/confirm_dialog/confirm_deactivate_realm.hbs

@@ -0,0 +1,26 @@
+{{#if can_set_data_deletion}}
+<form id="realm-data-deletion-form">
+    <div class="input-group">
+        <label for="delete-realm-data-in" class="modal-field-label">{{t "After how much time should all data for this organization be permanently deleted (users, channels, messages, etc.)?" }}</label>
+        <select id="delete-realm-data-in" name="delete-realm-data-in" class="modal_select bootstrap-focus-style">
+            {{#each delete_in_options}}
+                <option {{#if this.default }}selected{{/if}} value="{{this.value}}">{{this.description}}</option>
+            {{/each}}
+        </select>
+        <p class="time-input-formatted-description"></p>
+        <div id="custom-realm-deletion-time" class="dependent-settings-block custom-time-input-container">
+            <label class="modal-field-label">{{custom_deletion_input_label}}</label>
+            <input id="custom-deletion-time-input" name="custom-deletion-time-input" class="custom-time-input-value inline-block modal_text_input" type="text" autocomplete="off" value="" maxlength="4"/>
+            <select id="custom-deletion-time-unit" name="custom-deletion-time-unit" class="custom-time-input-unit bootstrap-focus-style modal_select" >
+                {{#each time_choices}}
+                    <option value="{{this.name}}">{{this.description}}</option>
+                {{/each}}
+            </select>
+            <p class="custom-time-input-formatted-description"></p>
+        </div>
+    </div>
+</form>
+<p>{{t "Are you sure you want to deactivate this organization? All users will lose access to their Zulip accounts." }}</p>
+{{else}}
+<p>{{t "Are you sure you want to deactivate this organization? All data will be immediately deleted." }}</p>
+{{/if}}

web/templates/confirm_dialog/confirm_deactivate_stream.hbs

@@ -0,0 +1,32 @@
+<p>
+    {{#tr}}Archiving this channel will:{{/tr}}
+</p>
+<ul>
+    <li>{{#tr}}Remove it from the left sidebar for all users.{{/tr}}</li>
+    <li>{{#tr}}Prevent new messages from being sent to this channel.{{/tr}}</li>
+    <li>{{#tr}}Prevent messages in this channel from being edited, deleted, or moved.{{/tr}}</li>
+    {{#if is_announcement_stream}}
+    <li>{{#tr}}Disable announcements that are currently sent to this channel:{{/tr}}
+        <ul>
+            {{#if is_moderation_request_channel}}
+                <li>{{#tr}}Moderation requests{{/tr}}</li>
+            {{/if}}
+            {{#if is_new_stream_announcements_stream}}
+                <li>{{#tr}}New channel announcements{{/tr}}</li>
+            {{/if}}
+            {{#if is_signup_announcements_stream}}
+                <li>{{#tr}}New user announcements{{/tr}}</li>
+            {{/if}}
+            {{#if is_zulip_update_announcements_stream}}
+                <li>{{#tr}}Zulip update announcements{{/tr}}</li>
+            {{/if}}
+        </ul>
+    </li>
+    {{/if}}
+</ul>
+<p>
+    {{#tr}}
+        Users can still search for messages in archived channels.
+        You can always unarchive this channel.
+    {{/tr}}
+</p>

web/templates/confirm_dialog/confirm_deactivate_user.hbs

@@ -0,0 +1,59 @@
+<p>
+    {{#tr}}
+        When you deactivate <z-user></z-user>, they will be immediately logged out.
+        {{#*inline "z-user"}}<strong>{{username}}</strong>{{#if email}} &lt;{{email}}&gt;{{/if}}{{/inline}}
+    {{/tr}}
+</p>
+<p>{{t "Their password will be cleared from our systems, and any bots they maintain will be disabled." }}</p>
+<p>
+    {{#unless (eq number_of_invites_by_user 0)}}
+        {{#tr}}
+            <strong>{username}</strong> has {number_of_invites_by_user, plural, one {# unexpired invitation} other {# unexpired invitations}}.
+        {{/tr}}
+    {{/unless}}
+</p>
+{{#unless (eq bots_owned_by_user.length 0)}}
+    <p>
+        {{t "They administer the following bots:"}}
+    </p>
+    <ul>
+        {{#each bots_owned_by_user}}
+            <li>{{this.full_name}}</li>
+        {{/each}}
+    </ul>
+{{/unless}}
+<label class="checkbox">
+    <input type="checkbox" class="send_email" />
+    <span class="rendered-checkbox"></span>
+    {{t "Notify this user by email?" }}
+</label>
+<div class="email_field">
+    <p class="border-top">
+        <strong>{{t "Subject" }}:</strong>
+        {{t "Notification of account deactivation on {realm_name}" }}
+    </p>
+    <div class="email-body">
+        <p>
+            {{#tr}}
+                Your Zulip account on <z-link></z-link> has been deactivated,
+                and you will no longer be able to log in.
+                {{#*inline "z-link"}}<a href="{{realm_url}}">{{realm_url}}</a>{{/inline}}
+            {{/tr}}
+        </p>
+        <p>{{t "The administrators provided the following comment:" }}</p>
+        <textarea class="email_field_textarea modal-textarea" rows="8" maxlength="2000"></textarea>
+    </div>
+</div>
+<div class="deactivate-actions">
+    <label>{{t "Choose content to delete"}}</label>
+    <div class="input-group">
+        {{#each user_deactivation_actions}}
+            <label class="checkbox">
+                <input type="checkbox" data-key="{{this.key}}"/>
+                <span class="rendered-checkbox"></span>
+                {{this.value}}
+            </label>
+            <br/>
+        {{/each}}
+    </div>
+</div>

web/templates/confirm_dialog/confirm_delete_all_drafts.hbs

@@ -0,0 +1 @@
+{{t "Are you sure you want to delete all drafts?"}} {{t "This action cannot be undone."}}

web/templates/confirm_dialog/confirm_delete_attachment.hbs

@@ -0,0 +1,3 @@
+{{#tr}}
+    <p><strong>{file_name}</strong> will be removed from the messages where it was shared. This action cannot be undone.</p>
+{{/tr}}

web/templates/confirm_dialog/confirm_delete_detached_attachments.hbs

@@ -0,0 +1,20 @@
+<div>
+    {{#if realm_message_edit_history_is_visible}}
+        {{#tr}}
+            The following <z-link>uploaded files</z-link> are no longer attached to any messages. They can still be accessed from this message's edit history. Would you like to delete them entirely?
+            {{#*inline "z-link"}}<a class="uploaded_files_settings_link" href="/#settings/uploaded-files">{{> @partial-block}}</a>{{/inline}}
+        {{/tr}}
+    {{else}}
+        {{#tr}}
+            The following <z-link>uploaded files</z-link> are no longer attached to any messages. Would you like to delete them entirely?
+            {{#*inline "z-link"}}<a class="uploaded_files_settings_link" href="/#settings/uploaded-files">{{> @partial-block}}</a>{{/inline}}
+        {{/tr}}
+    {{/if}}
+</div>
+<ul class="modal-options-list">
+    {{#each attachments_list}}
+        <li>
+            <a href="/user_uploads/{{this.path_id}}" rel="noopener noreferrer" target="_blank">{{this.name}}</a>
+        </li>
+    {{/each}}
+</ul>

web/templates/confirm_dialog/confirm_delete_profile_field.hbs

@@ -0,0 +1,12 @@
+{{#if (eq count 1)}}
+    {{#tr}}
+        This will delete the <z-profile-field-name></z-profile-field-name> profile field for 1 user.
+        {{#*inline "z-profile-field-name"}}<strong>{{profile_field_name}}</strong>{{/inline}}
+    {{/tr}}
+{{else}}
+    {{#tr}}
+        This will delete the <z-profile-field-name></z-profile-field-name> profile field for <z-count></z-count> users.
+        {{#*inline "z-count"}}{{count}}{{/inline}}
+        {{#*inline "z-profile-field-name"}}<strong>{{profile_field_name}}</strong>{{/inline}}
+    {{/tr}}
+{{/if}}

web/templates/confirm_dialog/confirm_delete_profile_field_option.hbs

@@ -0,0 +1,26 @@
+<p>
+    {{#if (eq count 1)}}
+        {{#tr}}
+            This will clear the <z-field-name></z-field-name> profile field for 1 user.
+            {{#*inline "z-field-name"}}<strong>{{field_name}}</strong>{{/inline}}
+        {{/tr}}
+    {{else}}
+        {{#tr}}
+            This will clear the <z-field-name></z-field-name> profile field for <z-count></z-count> users.
+            {{#*inline "z-count"}}{{count}}{{/inline}}
+            {{#*inline "z-field-name"}}<strong>{{field_name}}</strong>{{/inline}}
+        {{/tr}}
+    {{/if}}
+</p>
+<div>
+    {{#if (eq deleted_options_count 1)}}
+        {{t "Deleted option:" }}
+    {{else}}
+        {{t "Deleted options:" }}
+    {{/if}}
+</div>
+<ul class="modal-options-list">
+    {{#each deleted_option_texts}}
+        <li>{{this}}</li>
+    {{/each}}
+</ul>

web/templates/confirm_dialog/confirm_delete_topic.hbs

@@ -0,0 +1,9 @@
+<p>
+    {{t "Deleting a topic will immediately remove it and its messages for everyone. Other users may find this confusing, especially if they had received an email or push notification related to the deleted messages." }}
+</p>
+<p>
+    {{#tr}}
+        Are you sure you want to permanently delete <z-topic-display-name></z-topic-display-name>?
+        {{#*inline "z-topic-display-name"}}<span class="white-space-preserve-wrap{{#if is_empty_string_topic}} empty-topic-display{{/if}}"><b class="highlighted-element">{{topic_display_name}}</b></span>{{/inline}}
+    {{/tr}}
+</p>

web/templates/confirm_dialog/confirm_disable_all_notifications.hbs

@@ -0,0 +1,12 @@
+<p>
+    {{#tr}}
+    You are about to disable all notifications for direct messages,
+    @&#8209;mentions and alerts, which may cause you to miss messages
+    that require your timely attention.
+    If you would like to temporarily disable all desktop notifications,
+    consider <z-link>turning on "Do not disturb"</z-link> instead.
+    {{#*inline "z-link"}}<a target="_blank" rel="noopener noreferrer" href="/help/do-not-disturb">{{> @partial-block}}</a>{{/inline}}
+    {{/tr}}
+</p>
+
+<p>{{t "Are you sure you want to continue?"}}</p>

web/templates/confirm_dialog/confirm_edit_messages.hbs

@@ -0,0 +1,5 @@
+<p>
+    {{#tr}}
+    Scrolling to your last message will mark <b>{num_unread}</b> unread messages as read. Would you like to scroll to that message and edit it?
+    {{/tr}}
+</p>

web/templates/confirm_dialog/confirm_emoji_settings_warning.hbs

@@ -0,0 +1,8 @@
+<div class="rendered_markdown">
+    <p>
+        {{#tr}}
+        There is a default emoji with this name. Do you want to override it with a custom emoji?
+        The name <code>:{emoji_name}:</code> will no longer work to access the default emoji.
+        {{/tr}}
+    </p>
+</div>

web/templates/confirm_dialog/confirm_join_group_direct_member.hbs

@@ -0,0 +1,4 @@
+<p>
+    {{t "You are already a member of this group because you are a member of a subgroup"}} (<b class="highlighted-element">{{associated_subgroup_names}}</b>).
+    {{t "Are you sure you want to join it directly as well?" }}
+</p>

web/templates/confirm_dialog/confirm_mark_all_as_read.hbs

@@ -0,0 +1,11 @@
+<p>
+    {{t "Which messages do you want to mark as read? This action cannot be undone." }}
+</p>
+<div class="input-group">
+    <select id="mark_as_read_option" class="modal_select bootstrap-style-font">
+        <option value="muted_topics">{{t "Muted topics" }}</option>
+        <option value="topics_not_followed" selected>{{t "Topics you don't follow" }}</option>
+        <option value="all_messages">{{t "All messages" }}</option>
+    </select>
+    <p id="message_count" class="message_count"></p>
+</div>

web/templates/confirm_dialog/confirm_merge_topics_with_rename.hbs

@@ -0,0 +1,7 @@
+<p>
+    {{#tr}}
+    The topic <z-topic-name>{topic_display_name}</z-topic-name> already exists in this channel.
+    Are you sure you want to combine messages from these topics? This cannot be undone.
+    {{#*inline "z-topic-name"}}<strong class="white-space-preserve-wrap {{#if is_empty_string_topic}}empty-topic-display{{/if}}">{{> @partial-block}}</strong>{{/inline}}
+    {{/tr}}
+</p>

web/templates/confirm_dialog/confirm_moving_messages.hbs

@@ -0,0 +1,6 @@
+<p>{{t "You do not have permission to move some of the messages in this topic. Contact a moderator to move all messages."}}
+</p>
+<p>
+    {{messages_allowed_to_move_text}}
+    {{messages_not_allowed_to_move_text}}
+</p>

web/templates/confirm_dialog/confirm_mute_user.hbs

@@ -0,0 +1,4 @@
+{{#tr}}
+Are you sure you want to mute <z-highlight>{user_name}</z-highlight>?  Messages sent by muted users will never trigger notifications, will be marked as read, and will be hidden.
+{{#*inline "z-highlight"}}<b class="highlighted-element">{{> @partial-block}}</b>{{/inline}}
+{{/tr}}

web/templates/confirm_dialog/confirm_reactivate_bot.hbs

@@ -0,0 +1,16 @@
+<p>
+    {{#tr}}
+    <z-user></z-user> will have the same properties as it did prior to deactivation,
+    including role, owner and channel subscriptions.
+    {{#*inline "z-user"}}<strong>{{username}}</strong>{{/inline}}
+    {{/tr}}
+</p>
+{{#if original_owner_deactivated}}
+    <p>
+        {{#tr}}
+        Because the original owner of this bot <z-bot-owner></z-bot-owner> is deactivated, you will become the owner for this bot.
+        {{#*inline "z-bot-owner"}}<strong>{{owner_name}}</strong>{{/inline}}
+        {{/tr}}
+        {{t "However, it will no longer be subscribed to the private channels that you are not subscribed to." }}
+    </p>
+{{/if}}

web/templates/confirm_dialog/confirm_reactivate_stream.hbs

@@ -0,0 +1,8 @@
+<p>
+    {{#tr}}Unarchiving this channel will:{{/tr}}
+</p>
+<ul>
+    <li>{{#tr}}Make it appear in the left sidebar for all subscribers.{{/tr}}</li>
+    <li>{{#tr}}Allow sending new messages to this channel.{{/tr}}</li>
+    <li>{{#tr}}Allow messages in this channel to be edited, deleted, or moved.{{/tr}}</li>
+</ul>

web/templates/confirm_dialog/confirm_reactivate_user.hbs

@@ -0,0 +1,8 @@
+<p>
+    {{#tr}}
+    <z-user></z-user> will have the same role, channel subscriptions,
+    user group memberships, and other settings and permissions as they did
+    prior to deactivation.
+    {{#*inline "z-user"}}<strong>{{username}}</strong>{{/inline}}
+    {{/tr}}
+</p>

web/templates/confirm_dialog/confirm_resend_invite.hbs

@@ -0,0 +1,11 @@
+<p>
+    {{#tr}}
+        Are you sure you want to resend the invitation to <z-email></z-email>?
+        {{#*inline "z-email"}}<strong>{{email}}</strong>{{/inline}}
+    {{/tr}}
+</p>
+<p>
+    {{#tr}}
+    This will not change the expiration time for this invitation.
+    {{/tr}}
+</p>

web/templates/confirm_dialog/confirm_reset_stream_notifications.hbs

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

web/templates/confirm_dialog/confirm_revoke_invite.hbs

@@ -0,0 +1,9 @@
+{{#if is_multiuse}}
+    {{#if referred_by}}
+        {{#tr}}Are you sure you want to revoke this invitation link created by <strong>{referred_by}</strong>?{{/tr}}
+    {{else}}
+        {{#tr}}Are you sure you want to revoke this invitation link?{{/tr}}
+    {{/if}}
+{{else}}
+    {{#tr}}Are you sure you want to revoke the invitation to <strong>{email}</strong>?{{/tr}}
+{{/if}}

web/templates/confirm_dialog/confirm_subscription_invites_warning.hbs

@@ -0,0 +1 @@
+{{t "Are you sure you want to create channel ''''{channel_name}'''' and subscribe {count} users to it?" }}

web/templates/confirm_dialog/confirm_unstar_all_messages.hbs

@@ -0,0 +1 @@
+{{t "Are you sure you want to unstar all starred messages?"}} {{t "This action cannot be undone."}}

web/templates/confirm_dialog/confirm_unstar_all_messages_in_topic.hbs

@@ -0,0 +1,4 @@
+{{#tr}}
+    Are you sure you want to unstar all messages in <stream-topic></stream-topic>?
+    {{#*inline "stream-topic"}}{{> ../stream_topic_widget . }}{{/inline}}
+{{/tr}} {{t "This action cannot be undone."}}

web/templates/confirm_dialog/confirm_unsubscribe_private_stream.hbs

@@ -0,0 +1,8 @@
+{{#unless unsubscribing_other_user}}
+    <p>{{t "Once you leave this channel, you will not be able to rejoin."}}</p>
+{{/unless}}
+{{#if organization_will_lose_content_access}}
+    <p>
+        {{t "Your organization will lose access content in this channel, and nobody will be able to subscribe to it in the future."}}
+    </p>
+{{/if}}

web/templates/confirm_dialog/intro_resolve_topic.hbs

@@ -0,0 +1,6 @@
+{{#tr}}
+You're marking the topic <z-highlight>{topic_name}</z-highlight> as resolved. This adds a ✔ at the beginning of the topic name to let everyone know that this conversation is done. <z-link>Learn more</z-link>
+{{#*inline "z-link"}}<a target="_blank" rel="noopener noreferrer" href="/help/resolve-a-topic">{{>
+    @partial-block}}</a>{{/inline}}
+{{#*inline "z-highlight"}}<b class="highlighted-element">{{> @partial-block}}</b>{{/inline}}
+{{/tr}}

web/templates/copied_recipient_header.hbs

@@ -0,0 +1 @@
+<p data-message-header-paragraph="true"><strong>{{recipient_text}}</strong>{{#if date_text}}<span> | {{date_text}}</span>{{/if}}</p>

web/templates/creator_details.hbs

@@ -0,0 +1,37 @@
+{{#*inline "creator-details-content"}}
+    {{#if creator}}
+        {{#tr}}
+            Created by <z-user></z-user> on <z-date-created></z-date-created>.
+            {{#*inline "z-user"}}
+                {{> user_display_only_pill
+                  is_inline=true
+                  user_id=creator.user_id
+                  img_src=creator.avatar_url
+                  display_value=creator.full_name
+                  is_current_user=is_creator
+                  is_active=creator.is_active }}
+            {{/inline}}
+            {{#*inline "z-date-created"}}{{date_created_string}}{{/inline}}
+        {{/tr}}
+    {{else}}
+        {{#tr}}
+            Created on <z-date-created></z-date-created>.
+            {{#*inline "z-date-created"}}{{date_created_string}}{{/inline}}
+        {{/tr}}
+    {{/if}}
+{{/inline}}
+{{#if group}}
+    {{#unless group.is_system_group}}
+        {{> creator-details-content .}}
+    {{/unless}}
+{{else}}
+    {{> creator-details-content .}}
+{{/if}}
+{{#unless (eq stream_id undefined)}}
+{{# tr}}
+    &nbsp;Channel ID: {stream_id}.
+{{/tr}}
+{{/unless}}
+{{#unless (eq group_id undefined)}}
+    {{#if group}}{{#unless group.is_system_group}}&nbsp;{{/unless}}{{else}}&nbsp;{{/if}}{{#tr}}Group ID: {group_id}.{{/tr}}
+{{/unless}}

web/templates/decorated_channel_name.hbs

@@ -0,0 +1,10 @@
+<span class="decorated-channel-name-wrapper{{#if inline_with_text}} inline-decorated-channel-name{{/if}}">
+    {{~!-- squash whitespace --~}}
+    <span class="channel-privacy-type-icon{{#if show_colored_icon}} stream-privacy-original-color-{{stream.stream_id}}{{/if}}"{{#if show_colored_icon}} style="color: {{stream.color}}"{{/if}}>
+        {{~> stream_privacy stream ~}}
+    </span>
+    {{~!-- squash whitespace --~}}
+    <span class="decorated-channel-name">{{stream.name}}</span>
+    {{~!-- squash whitespace --~}}
+</span>
+{{~!-- squash whitespace --~}}

web/templates/default_external_account_icon.hbs

@@ -0,0 +1,3 @@
+{{#unless (eq this.subtype "custom")}}
+    <i class="zulip-icon zulip-icon-{{this.subtype}}" aria-hidden="true"></i>
+{{/unless}}

web/templates/default_language_modal.hbs

@@ -0,0 +1,25 @@
+<p>
+    {{t "A language is marked as 100% translated only if every string in the web, desktop,
+      and mobile apps is translated, including administrative UI and error messages." }}
+</p>
+<p>
+    {{#tr}}
+        Zulip's translations are contributed by our amazing community of volunteer
+        translators. If you'd like to help, see the
+        <z-link>Zulip translation guidelines</z-link>.
+        {{#*inline "z-link"}}<a target="_blank" rel="noopener noreferrer" href="https://zulip.readthedocs.io/en/latest/translating/translating.html">{{> @partial-block}}</a>{{/inline}}
+    {{/tr}}
+</p>
+<div class="default_language_modal_table">
+    {{#each language_list}}
+        <div class="language_block">
+            <a class="language" data-code="{{this.code}}">
+                {{#if this.selected}}
+                <b>{{this.name_with_percent}}</b>
+                {{else}}
+                {{this.name_with_percent}}
+                {{/if}}
+            </a>
+        </div>
+    {{/each}}
+</div>

web/templates/demo_organization_add_email_modal.hbs

@@ -0,0 +1,24 @@
+<form class="modal-form" id="demo_organization_add_email_form">
+    <div class="input-group">
+        <label for="demo_organization_add_email" class="modal-field-label">{{t "Email" }}</label>
+        <input id="demo_organization_add_email" type="text" name="email" class="modal_text_input" value="{{delivery_email}}" autocomplete="off" spellcheck="false" autofocus="autofocus"/>
+    </div>
+    <div class="input-group">
+        <label for="demo_owner_email_address_visibility" class="modal-field-label">
+            {{t "Who can access your email address"}}
+            {{> help_link_widget link="/help/configure-email-visibility" }}
+        </label>
+        <select id="demo_owner_email_address_visibility" name="demo_owner_email_address_visibility" class="modal_select bootstrap-focus-style">
+            {{#each (object_values email_address_visibility_values)}}
+                <option value="{{this.code}}">{{this.description}}</option>
+            {{/each}}
+        </select>
+    </div>
+    <div class="input-group">
+        <label for="demo_organization_update_full_name" class="modal-field-label">{{t "Name" }}</label>
+        <p id="demo-owner-update-email-field-hint">
+            {{t "If you haven't updated your name, consider doing so before inviting others to join."}}
+        </p>
+        <input id="demo_organization_update_full_name" name="full_name" type="text" class="modal_text_input" value="{{full_name}}" maxlength="60" />
+    </div>
+</form>

web/templates/dialog_change_password.hbs

@@ -0,0 +1,21 @@
+<form class="modal-form" id="change_password_container">
+    <div class="settings-password-div">
+        <label for="old_password" class="modal-field-label">{{t "Old password" }}</label>
+        <div class="password-input-row">
+            <input type="password" autocomplete="off" name="old_password" id="old_password" class="inline-block modal_password_input" value="" />
+            <i class="zulip-icon zulip-icon-hide password_visibility_toggle tippy-zulip-tooltip" role="button" tabindex="0"></i>
+            <a href="/accounts/password/reset/" class="settings-forgot-password" target="_blank" rel="noopener noreferrer">{{t "Forgot it?" }}</a>
+        </div>
+    </div>
+    <div class="settings-password-div">
+        <label for="new_password" class="modal-field-label">{{t "New password" }}</label>
+        <div class="password-input-row">
+            <input type="password" autocomplete="new-password" name="new_password" id="new_password" class="inline-block modal_password_input" value=""
+              data-min-length="{{password_min_length}}" data-min-guesses="{{password_min_guesses}}" data-max-length="{{ password_max_length }}" />
+            <i class="zulip-icon zulip-icon-hide password_visibility_toggle tippy-zulip-tooltip" role="button" tabindex="0"></i>
+        </div>
+        <div class="progress inline-block" id="pw_strength">
+            <div class="bar bar-danger hide" style="width: 10%;"></div>
+        </div>
+    </div>
+</form>

web/templates/dialog_widget.hbs

@@ -0,0 +1,54 @@
+<div class="micromodal" id="{{modal_unique_id}}" aria-hidden="true">
+    <div class="modal__overlay {{#unless close_on_overlay_click}}ignore-overlay-click{{/unless}}" tabindex="-1">
+        <div {{#if id}}id="{{id}}" {{/if}}class="modal__container" role="dialog" aria-modal="true" aria-labelledby="dialog_title">
+            <header class="modal__header">
+                <div class="modal__header-content">
+                    <h1 id="dialog_title" class="modal__title dialog_heading">
+                        {{#if modal_title_html}}
+                            {{{ modal_title_html }}}
+                        {{else}}
+                            {{ modal_title_text }}
+                        {{/if}}
+                        {{#if link}}
+                        {{> help_link_widget . }}
+                        {{/if}}
+                    </h1>
+                    {{#if is_compact}}
+                        <div class="alert" id="dialog_error"></div>
+                    {{/if}}
+                    {{#if modal_subtitle_html}}
+                    <div class="modal__subtitle">
+                        {{{ modal_subtitle_html }}}
+                    </div>
+                    {{/if}}
+                </div>
+                {{#if has_tab_switcher}}
+                <div class="modal__tab-switcher-container"></div>
+                {{/if}}
+                {{> components/icon_button icon="close" intent="neutral" custom_classes="modal__close" aria-label=(t 'Close modal') data-micromodal-close=true }}
+            </header>
+            {{#unless is_compact}}
+            <main class="modal__content {{#if hide_footer}} footer-hidden {{/if}}" data-simplebar data-simplebar-tab-index="-1" {{#if always_visible_scrollbar}}data-simplebar-auto-hide="false"{{/if}}>
+                <div class="alert" id="dialog_error"></div>
+                {{{ modal_content_html }}}
+            </main>
+            {{/unless}}
+            {{#unless hide_footer}}
+            <footer class="modal__footer">
+                {{#if footer_minor_text }}
+                <div class="dialog-widget-footer-minor-text">{{footer_minor_text}}</div>
+                {{/if}}
+                {{#unless single_footer_button}}
+                <button class="modal__button dialog_exit_button" aria-label="{{t 'Close this dialog window' }}" data-micromodal-close>{{ modal_exit_button_text }}</button>
+                {{/unless}}
+                <div class="dialog_submit_button_container">
+                    <button class="modal__button dialog_submit_button{{#if dangerous_action}} dangerous_action_button{{/if}}"{{#if single_footer_button}} aria-label="{{t 'Close this dialog window' }}" data-micromodal-close{{/if}}>
+                        <span class="submit-button-text">{{ modal_submit_button_text }}</span>
+                        <span class="modal__spinner"></span>
+                    </button>
+                </div>
+            </footer>
+            {{/unless}}
+        </div>
+    </div>
+</div>

web/templates/draft.hbs

@@ -0,0 +1,64 @@
+<div class="draft-message-row overlay-message-row" data-draft-id="{{draft_id}}">
+    <div class="draft-message-info-box overlay-message-info-box" tabindex="0">
+        {{#if is_stream}}
+        <div class="message_header message_header_stream restore-overlay-message overlay-message-header">
+            <div class="message-header-contents" style="background: {{recipient_bar_color}};">
+                <div class="message_label_clickable stream_label">
+                    <span class="stream-privacy-modified-color-{{stream_id}} stream-privacy filter-icon"  style="color: {{stream_privacy_icon_color}}">
+                        {{> stream_privacy .}}
+                    </span>
+                    {{#if stream_name}}
+                        {{stream_name}}
+                    {{else}}
+                        <span class="drafts-unknown-msg-header-field">{{t "No channel selected" }}</span>
+                    {{/if}}
+                </div>
+                <span class="stream_topic_separator"><i class="zulip-icon zulip-icon-chevron-right"></i></span>
+                <span class="stream_topic">
+                    <span class="message_label_clickable narrows_by_topic">
+                        <span class="stream-topic-inner {{#if is_empty_string_topic}}empty-topic-display{{/if}}">{{topic_display_name}}</span>
+                    </span>
+                </span>
+                <span class="recipient_bar_controls"></span>
+                <div class="recipient_row_date">{{ time_stamp }}</div>
+            </div>
+        </div>
+        {{else}}
+        <div class="message_header message_header_private_message restore-overlay-message overlay-message-header">
+            <div class="message-header-contents">
+                <div class="message_label_clickable stream_label">
+                    <span class="private_message_header_icon"><i class="zulip-icon zulip-icon-user"></i></span>
+                    {{#if is_dm_with_self}}
+                    <span class="private_message_header_name">{{t "You" }}</span>
+                    {{else}}
+                    {{#if has_recipient_data}}
+                    <span class="private_message_header_name">{{t "You and {recipients}" }}</span>
+                    {{else}}
+                    <span class="drafts-unknown-msg-header-field">{{t "No DM recipients" }}</span>
+                    {{/if}}
+                    {{/if}}
+                </div>
+                <div class="recipient_row_date">{{ time_stamp }}</div>
+            </div>
+        </div>
+        {{/if}}
+        <div class="message_row{{#unless is_stream}} private-message{{/unless}}" role="listitem">
+            <div class="messagebox">
+                <div class="messagebox-content">
+                    <div class="message_top_line">
+                        <div class="overlay_message_controls">
+                            <span class="copy-button copy-overlay-message tippy-zulip-delayed-tooltip" data-draft-id="{{draft_id}}" data-tippy-content="{{t 'Copy draft' }}" aria-label="{{t 'Copy draft' }}" role="button">
+                                <i class="zulip-icon zulip-icon-copy" aria-hidden="true"></i>
+                            </span>
+                            {{> ./components/icon_button intent="danger" custom_classes="delete-overlay-message tippy-zulip-delayed-tooltip" icon="trash" data-tooltip-template-id="delete-draft-tooltip-template" aria-label=(t "Delete") }}
+                            <div class="draft-selection-tooltip">
+                                <i class="fa fa-square-o fa-lg draft-selection-checkbox" aria-hidden="true"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="message_content rendered_markdown restore-overlay-message">{{rendered_markdown content}}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

web/templates/draft_table_body.hbs

@@ -0,0 +1,36 @@
+<div id="draft_overlay" class="overlay" data-overlay="drafts" tabindex="-1">
+    <div class="flex overlay-content">
+        <div class="drafts-container overlay-messages-container overlay-container">
+            <div class="overlay-messages-header">
+                <h1>{{t 'Drafts' }}</h1>
+                <div class="exit">
+                    <span class="exit-sign">&times;</span>
+                </div>
+                <div id="draft_overlay_banner_container" class="banner-container banner-wrapper"></div>
+                <div class="header-body">
+                    <div class="drafts-header-note">
+                        <div class="overlay-keyboard-shortcuts">
+                            {{#tr}}
+                                To restore a draft, click on it or press <z-shortcut></z-shortcut>.
+                                {{#*inline "z-shortcut"}}{{popover_hotkey_hints "Enter"}}{{/inline}}
+                            {{/tr}}
+                        </div>
+                        <div>{{t "Drafts are not synced to other devices and browsers." }}</div>
+                    </div>
+                    <div class="delete-drafts-group">
+                        <div class="delete-selected-drafts-button-container">
+                            {{> ./components/icon_button intent="danger" custom_classes="delete-selected-drafts-button" icon="trash" disabled=true  }}
+                        </div>
+                        <button class="action-button action-button-subtle-neutral select-drafts-button" role="checkbox" aria-checked="false">
+                            <span>{{t "Select all drafts" }}</span>
+                            <i class="fa fa-square-o select-state-indicator" aria-hidden="true"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="drafts-tab-pane">
+                {{> drafts_list context }}
+            </div>
+        </div>
+    </div>
+</div>

web/templates/drafts_list.hbs

@@ -0,0 +1,38 @@
+<div class="drafts-list overlay-messages-list" data-simplebar data-simplebar-tab-index="-1">
+    <div class="no-drafts no-overlay-messages">
+        {{t 'No drafts.'}}
+    </div>
+
+    <div id="drafts-from-conversation">
+        {{#with narrow_drafts_header}}
+            {{#if is_dm_with_self}}
+                <h2>{{t "Drafts from conversation with yourself"}}</h2>
+            {{else if dm_recipient_string}}
+                <h2>{{#tr}}Drafts from conversation with {dm_recipient_string}{{/tr}}</h2>
+            {{else}}
+                <h2>
+                    {{~#tr}}
+                        Drafts from <z-recipient></z-recipient>
+                        {{#*inline "z-recipient"}}
+                            {{#if stream}}
+                                {{~> decorated_channel_name stream=stream inline_with_text=true show_colored_icon=false}}
+                            {{else if channel_name_fallback~}}
+                                #{{channel_name_fallback}}
+                            {{~/if}}
+                            {{~#if topic}} &gt; {{topic}}{{/if}}
+                        {{/inline}}
+                    {{/tr~}}
+                </h2>
+            {{/if}}
+        {{/with}}
+        {{#each narrow_drafts}}
+            {{> draft .}}
+        {{/each}}
+    </div>
+    <div id="other-drafts">
+        <h2 id="other-drafts-header">{{t "Other drafts" }}</h2>
+        {{#each other_drafts}}
+            {{> draft .}}
+        {{/each}}
+    </div>
+</div>

web/templates/drafts_tooltip.hbs

@@ -0,0 +1,7 @@
+<div>
+    <div>{{t "View drafts"}}</div>
+    {{#if draft_count_msg}}
+        <div class="tooltip-inner-content italic">{{draft_count_msg}}</div>
+    {{/if}}
+</div>
+{{tooltip_hotkey_hints "D"}}

web/templates/dropdown_current_value_not_in_options.hbs

@@ -0,0 +1 @@
+<span class="dropdown-current-value-not-in-options">{{name}}</span>

web/templates/dropdown_disabled_state.hbs

@@ -0,0 +1 @@
+<span class="setting-disabled-option">{{name}}</span>

web/templates/dropdown_italic_state.hbs

@@ -0,0 +1 @@
+<span class="italic">{{name}}</span>

web/templates/dropdown_list.hbs

@@ -0,0 +1,78 @@
+{{#with item}}
+    <li class="list-item {{#if highlight_value}}highlight_value{{/if}}" role="presentation" data-unique-id="{{unique_id}}" data-name="{{name}}" tabindex="0">
+        {{#if description}}
+        <a class="dropdown-list-item-common-styles">
+            <span class="dropdown-list-item-name">
+                {{#if bold_current_selection}}
+                    <span class="dropdown-list-text-selected">{{name}}</span>
+                    {{#if (or has_edit_icon has_manage_folder_icon has_delete_icon)}}
+                    <span class="dropdown-list-buttons">
+                        {{#if has_edit_icon}}
+                            {{> components/icon_button custom_classes="dropdown-list-edit dropdown-list-control-button" intent="neutral" icon="edit" aria-label=edit_icon_label }}
+                        {{/if}}
+                        {{#if has_manage_folder_icon}}
+                            {{> components/icon_button custom_classes="dropdown-list-manage-folder dropdown-list-control-button" intent="neutral" icon=manage_folder_icon aria-label=manage_folder_icon_label }}
+                        {{/if}}
+                        {{#if has_delete_icon}}
+                            {{> components/icon_button custom_classes="dropdown-list-delete dropdown-list-control-button" intent="danger" icon="trash" aria-label=delete_icon_label }}
+                        {{/if}}
+                    </span>
+                    {{/if}}
+                {{else}}
+                    <span class="dropdown-list-text-neutral">{{name}}</span>
+                {{/if}}
+            </span>
+            <span class="dropdown-list-item-description line-clamp">
+                {{description}}
+            </span>
+        </a>
+        {{else}}
+        <a class="dropdown-list-item-common-styles {{#if is_setting_disabled}}setting-disabled-option{{/if}} {{#if make_italic}}italic{{/if}}">
+            {{#if stream}}
+                {{> decorated_channel_name stream=stream show_colored_icon=true}}
+            {{else if is_direct_message}}
+                <div class="dropdown-list-item-direct-message">
+                    <i class="zulip-icon zulip-icon-users dropdown-list-item-icon"></i>
+                    <span class="decorated-dm-name">{{name}}</span>
+                </div>
+            {{else if is_setting_disabled}}
+                <div class="dropdown-list-item-setting-disabled-option">
+                    <i class="setting-disabled-option-icon zulip-icon zulip-icon-deactivated-circle dropdown-list-item-icon" aria-hidden="true"></i>
+                    {{#if bold_current_selection}}
+                        <span class="setting-disabled-option-text dropdown-list-text-selected">{{t "Disable" }}</span>
+                    {{else}}
+                        <span class="setting-disabled-option-text dropdown-list-text-neutral">{{t "Disable" }}</span>
+                    {{/if}}
+                </div>
+            {{else if (eq unique_id -2)}}
+                {{!-- This is the option for PresetUrlOption.CHANNEL_MAPPING --}}
+                <div class="dropdown-list-item-channel-mapping">
+                    <i class="zulip-icon zulip-icon-hashtag dropdown-list-item-icon" aria-hidden="true"></i>
+                    <span class="dropdown-list-text-neutral">{{name}}</span>
+                </div>
+            {{else}}
+                <span class="dropdown-list-item-name">
+                    {{#if bold_current_selection}}
+                        <span class="dropdown-list-text-selected">{{name}}</span>
+                    {{else}}
+                        <span class="dropdown-list-text-neutral">{{name}}</span>
+                    {{/if}}
+                    {{#if (or has_edit_icon has_manage_folder_icon has_delete_icon)}}
+                    <span class="dropdown-list-buttons">
+                        {{#if has_edit_icon}}
+                            {{> components/icon_button custom_classes="dropdown-list-edit dropdown-list-control-button" intent="neutral" icon="edit" aria-label=(t "Edit folder") }}
+                        {{/if}}
+                        {{#if has_manage_folder_icon}}
+                            {{> components/icon_button custom_classes="dropdown-list-manage-folder dropdown-list-control-button" intent="neutral" icon=manage_folder_icon aria-label=manage_folder_icon_label }}
+                        {{/if}}
+                        {{#if has_delete_icon}}
+                            {{> components/icon_button custom_classes="dropdown-list-delete dropdown-list-control-button" intent="danger" icon="trash" aria-label=(t "Delete folder") }}
+                        {{/if}}
+                    </span>
+                    {{/if}}
+                </span>
+            {{/if}}
+        </a>
+        {{/if}}
+    </li>
+{{/with}}

web/templates/dropdown_list_container.hbs

@@ -0,0 +1,21 @@
+{{! We set tabindex to -1 so the element can receive focus via JS without entering the Tab order.
+We focus on the list container so that we can setup a listener on the container and capture
+events for keyboard navigation. }}
+<div class="dropdown-list-container {{widget_name}}-dropdown-list-container" tabindex="-1">
+    <div class="dropdown-list-search popover-filter-input-wrapper">
+        <input class="dropdown-list-search-input popover-filter-input filter_text_input{{#if hide_search_box}} hide{{/if}}" type="text" placeholder="{{t 'Filter' }}" autofocus/>
+    </div>
+    <div class="dropdown-list-viewport-padding">
+        <div class="dropdown-list-wrapper" data-simplebar data-simplebar-tab-index="-1">
+            <ul class="dropdown-list"></ul>
+            <div class="no-dropdown-items">
+                {{t 'No matching results'}}
+            </div>
+        </div>
+    </div>
+    {{#if sticky_bottom_option}}
+    <button class="sticky-bottom-option-button">
+        {{sticky_bottom_option}}
+    </button>
+    {{/if}}
+</div>

web/templates/dropdown_widget.hbs

@@ -0,0 +1,4 @@
+<button id="{{widget_name}}_widget" class="dropdown-widget-button {{#if custom_classes}}{{custom_classes}}{{/if}}" type="button" {{#if is_setting_disabled}}disabled{{/if}} {{#if disable_keyboard_focus}}tabindex="-1"{{/if}} name="{{widget_name}}">
+    <span class="dropdown_widget_value">{{#if default_text}}{{default_text}}{{/if}}</span>
+    <i class="zulip-icon zulip-icon-chevron-down"></i>
+</button>

web/templates/dropdown_widget_with_label.hbs

@@ -0,0 +1,9 @@
+<div class="input-group" id="{{widget_name}}_widget_container">
+    <label class="settings-field-label" for="{{widget_name}}_widget">{{label}}
+        {{#if help_link}}{{> help_link_widget link=help_link }}{{/if}}
+    </label>
+    <span class="prop-element hide" id="id_{{widget_name}}" data-setting-widget-type="dropdown-list-widget" {{#if value_type}}data-setting-value-type="{{value_type}}"{{/if}}></span>
+    <div class="dropdown_widget_with_label_wrapper">
+        {{> dropdown_widget .}}
+    </div>
+</div>

web/templates/dropdown_widget_wrapper.hbs

@@ -0,0 +1,3 @@
+<div id="{{widget_name}}_widget_wrapper" tabindex="0">
+    {{> dropdown_widget . disable_keyboard_focus="true"}}
+</div>

web/templates/edit_saved_snippet_modal.hbs

@@ -0,0 +1,10 @@
+<div id="edit-saved-snippet-modal">
+    <form class="modal-form" id="edit-saved-snippet-form">
+        <label for="title" class="modal-field-label">{{t "Title" }}</label>
+        <input id="edit-saved-snippet-title" type="text" name="title" class="modal_text_input saved-snippet-title" value="{{title}}" autocomplete="off" spellcheck="false" autofocus="autofocus"/>
+        <div>{{t "Content" }}</div>
+        <textarea class="modal-textarea saved-snippet-content" rows="4">
+            {{~content~}}
+        </textarea>
+    </form>
+</div>

web/templates/edited_notice.hbs

@@ -0,0 +1,16 @@
+<div class="edit-notifications{{#if modified}} has-edit-history{{/if}}"></div>
+{{#if modified}}
+    {{#unless (eq msg/local_edit_timestamp undefined)}}
+        <div class="message_edit_notice">
+            {{t "SAVING"}}
+        </div>
+    {{else if edited}}
+        <div class="message_edit_notice">
+            {{t "EDITED"}}
+        </div>
+    {{else}}
+        <div class="message_edit_notice">
+            {{t "MOVED"}}
+        </div>
+    {{/unless}}
+{{/if}}

web/templates/editing_notifications.hbs

@@ -0,0 +1,5 @@
+<div class="message-editing-animation">
+    <span class="y-animated-dot"></span>
+    <span class="y-animated-dot"></span>
+    <span class="y-animated-dot"></span>
+</div>

web/templates/embedded_bot_config_item.hbs

@@ -0,0 +1,5 @@
+<div class="input-group" name="{{botname}}" id="{{botname}}_{{key}}">
+    <label for="{{botname}}_{{key}}_input" class="modal-field-label">{{key}}</label>
+    <input type="text" name="{{key}}" id="{{botname}}_{{key}}_input" class="modal_text_input"
+      maxlength=1000 placeholder="{{value}}" value="" />
+</div>