navbar: Migrate to handlebars.

This commit migrates the `navbar.html` Django template
to handlebars by creating a new file as `navbar.hbs`
within `/static/templates` which is then rendered
using `ui_init` module.

As a part of migration, we also remove the `search_pills_enabled`
and `embedded` parameters from the context attribute as they
are no longer needed now.

Fixes part of #18792.

static/js/ui_init.js

@@ -7,6 +7,7 @@ import * as emoji from "../shared/js/emoji";
 import * as fenced_code from "../shared/js/fenced_code";
 import render_edit_content_button from "../templates/edit_content_button.hbs";
 import render_left_sidebar from "../templates/left_sidebar.hbs";
+import render_navbar from "../templates/navbar.hbs";
 import render_right_sidebar from "../templates/right_sidebar.hbs";
 
 import * as about_zulip from "./about_zulip";
@@ -149,6 +150,15 @@ function initialize_right_sidebar() {
     $("#right-sidebar-container").html(rendered_sidebar);
 }
 
+function initialize_navbar() {
+    const rendered_navbar = render_navbar({
+        embedded: page_params.narrow_stream !== undefined,
+        search_pills_enabled: page_params.search_pills_enabled,
+    });
+
+    $("#navbar-container").html(rendered_navbar);
+}
+
 export function initialize_kitchen_sink_stuff() {
     // TODO:
     //      This function is a historical dumping ground
@@ -495,6 +505,7 @@ export function initialize_everything() {
     initialize_left_sidebar();
     initialize_right_sidebar();
     compose.initialize();
+    initialize_navbar();
 
     message_lists.initialize();
     alert_words.initialize(alert_words_params);

static/styles/zulip.css

@@ -2019,6 +2019,11 @@ div.focused_table {
     /* border-right: 2px solid hsl(204, 20%, 74%); */
 }
 
+.hide-streamlist-toggle-visibility,
+.hide-navbar-buttons-visibility {
+    visibility: hidden;
+}
+
 #streamlist-toggle-button {
     text-decoration: none;
     color: hsl(0, 0%, 52%);

static/templates/navbar.hbs

@@ -7,7 +7,7 @@
         </div>
         <div class="column-middle" id="navbar-middle">
             <div class="column-middle-inner">
-                <div id="streamlist-toggle" title="{{ _('Stream list') }} (q)" {%if embedded %} style="visibility: hidden"{% endif %}>
+                <div id="streamlist-toggle" {{#if embedded}}class="hide-streamlist-toggle-visibility"{{/if}} title="{{t 'Stream list' }} (q)">
                     <a href="#" id="streamlist-toggle-button" role="button"><i class="fa fa-reorder" aria-hidden="true"></i>
                         <span id="streamlist-toggle-unreadcount">0</span>
                     </a>
@@ -15,39 +15,39 @@
                 <div class="top-navbar-border top-navbar-container">
                     <div id="message_view_header" class="notdisplayed">
                     </div>
-                    {% if search_pills_enabled %}
+                    {{#if search_pills_enabled }}
                     <div id="searchbox">
                         <form id="searchbox_form" class="form-search navbar-search">
                             <div id="search_arrows" class="pill-container input-append">
                                 <span class="search_icon search_open" ><i class="fa fa-search" aria-hidden="true"></i></span>
-                                <div contenteditable="true" class="input search-query input-block-level" id="search_query" type="text" placeholder="{{ _('Search') }}"
+                                <div contenteditable="true" class="input search-query input-block-level" id="search_query" type="text" placeholder="{{t 'Search' }}"
-                                  autocomplete="off" aria-label="{{ _('Search') }}" title="{{ _('Search') }} (/)"> </div>
+                                  autocomplete="off" aria-label="{{t 'Search' }}" title="{{t 'Search' }} (/)"> </div>
-                                <button class="btn search_button" type="button" id="search_exit" aria-label="{{ _('Exit search') }}"><i class="fa fa-remove" aria-hidden="true"></i></button>
+                                <button class="btn search_button" type="button" id="search_exit" aria-label="{{t 'Exit search' }}"><i class="fa fa-remove" aria-hidden="true"></i></button>
                             </div>
                         </form>
                     </div>
-                    {% else %}
+                    {{else}}
                     <div id="searchbox_legacy">
                         <form id="searchbox_form" class="form-search navbar-search">
                             <div id="search_arrows" class="input-append">
                                 <span class="search_icon search_open" ><i class="fa fa-search" aria-hidden="true"></i></span>
-                                <input class="search-query input-block-level home-page-input" id="search_query" type="text" placeholder="{{ _('Search') }}"
+                                <input class="search-query input-block-level home-page-input" id="search_query" type="text" placeholder="{{t 'Search' }}"
-                                  autocomplete="off" aria-label="{{ _('Search') }}" title="{{ _('Search') }} (/)"/>
+                                  autocomplete="off" aria-label="{{t 'Search' }}" title="{{t 'Search' }} (/)"/>
-                                <button class="btn search_button" type="button" id="search_exit" aria-label="{{ _('Exit search') }}"><i class="fa fa-remove" aria-hidden="true"></i></button>
+                                <button class="btn search_button" type="button" id="search_exit" aria-label="{{t 'Exit search' }}"><i class="fa fa-remove" aria-hidden="true"></i></button>
                             </div>
                         </form>
                     </div>
-                    {% endif %}
+                    {{/if}}
                 </div>
             </div>
         </div>
         <div class="column-right">
-            <div id="userlist-toggle" title="{{ _('User list') }} (w)">
+            <div id="userlist-toggle" title="{{t 'User list' }} (w)">
                 <a href="#" id="userlist-toggle-button" role="button"><i class="fa fa-group" aria-hidden="true"></i>
                     <span id="userlist-toggle-unreadcount">0</span>
                 </a>
             </div>
-            <div id="navbar-buttons" {%if embedded %} style="visibility: hidden"{% endif %}>
+            <div id="navbar-buttons" {{#if embedded}}class="hide-navbar-buttons-visibility"{{/if}}>
             </div>
         </div>
     </nav>

templates/zerver/app/index.html

@@ -82,7 +82,7 @@
 </div>
 
 <div id="navbar_alerts_wrapper"></div>
-{% include "zerver/app/navbar.html" %}
+<div id="navbar-container"></div>
 
 <div class="fixed-app">
     <div class="app-main">

tools/linter_lib/custom_check.py

@@ -675,8 +675,6 @@ html_rules: List["Rule"] = [
             # Social backend logos are dynamically loaded
             "templates/zerver/accounts_home.html",
             "templates/zerver/login.html",
-            # Probably just needs to be changed to display: none so the exclude works
-            "templates/zerver/app/navbar.html",
             # Needs the width cleaned up; display: none is fine
             "static/templates/settings/account_settings.hbs",
             # background image property is dynamically generated

zerver/views/home.py

@@ -202,12 +202,10 @@ def home_real(request: HttpRequest) -> HttpResponse:
             "user_profile": user_profile,
             "page_params": page_params,
             "csp_nonce": csp_nonce,
-            "search_pills_enabled": settings.SEARCH_PILLS_ENABLED,
             "is_owner": user_permission_info.is_realm_owner,
             "is_admin": user_permission_info.is_realm_admin,
             "is_guest": user_permission_info.is_guest,
             "color_scheme": user_permission_info.color_scheme,
-            "embedded": narrow_stream is not None,
             "max_file_upload_size_mib": settings.MAX_FILE_UPLOAD_SIZE,
         },
     )