left_sidebar: Add "Drafts" item.

This currently shows the drafts as a popup. Eventually, we'll want to
migrate it to be a view in the center pane, as we did with Recent
Topics.

This uses the same style as starred messages in order to show the number
of drafts.

See CZO for more context:
https://chat.zulip.org/#narrow/stream/101-design/topic/drafts.20in.20sidebar

frontend_tests/node_tests/drafts.js

@@ -95,6 +95,9 @@ test("draft_model add", ({override}) => {
     const ls = localstorage();
     assert.equal(ls.get("draft"), undefined);
 
+    const unread_count = $('<span class="unread_count"></span>');
+    $(".top_left_drafts").set_find_results(".unread_count", unread_count);
+
     override(Date, "now", () => 1);
     const expected = {...draft_1};
     expected.updatedAt = 1;
@@ -108,6 +111,9 @@ test("draft_model edit", () => {
     assert.equal(ls.get("draft"), undefined);
     let id;
 
+    const unread_count = $('<span class="unread_count"></span>');
+    $(".top_left_drafts").set_find_results(".unread_count", unread_count);
+
     with_overrides((override) => {
         override(Date, "now", () => 1);
         const expected = {...draft_1};
@@ -130,6 +136,9 @@ test("draft_model delete", ({override}) => {
     const ls = localstorage();
     assert.equal(ls.get("draft"), undefined);
 
+    const unread_count = $('<span class="unread_count"></span>');
+    $(".top_left_drafts").set_find_results(".unread_count", unread_count);
+
     override(Date, "now", () => 1);
     const expected = {...draft_1};
     expected.updatedAt = 1;
@@ -178,6 +187,9 @@ test("initialize", ({override}) => {
         assert.ok(called);
     };
 
+    const unread_count = $('<span class="unread_count"></span>');
+    $(".top_left_drafts").set_find_results(".unread_count", unread_count);
+
     drafts.initialize();
 });
 
@@ -202,6 +214,9 @@ test("remove_old_drafts", () => {
     ls.set("drafts", data);
     assert.deepEqual(draft_model.get(), data);
 
+    const unread_count = $('<span class="unread_count"></span>');
+    $(".top_left_drafts").set_find_results(".unread_count", unread_count);
+
     drafts.remove_old_drafts();
     assert.deepEqual(draft_model.get(), {id3: draft_3});
 });
@@ -335,6 +350,9 @@ test("format_drafts", ({override, mock_template}) => {
 
     expected[0].stream_name = "stream-rename";
 
+    const unread_count = $('<span class="unread_count"></span>');
+    $(".top_left_drafts").set_find_results(".unread_count", unread_count);
+
     drafts.launch();
     timerender.__Rewire__("render_now", stub_render_now);
 });

static/js/drafts.js

@@ -22,12 +22,15 @@ import * as people from "./people";
 import * as stream_data from "./stream_data";
 import * as sub_store from "./sub_store";
 import * as timerender from "./timerender";
+import * as ui_util from "./ui_util";
 import * as util from "./util";
 
 function set_count(count) {
     const draft_count = count.toString();
     const text = $t({defaultMessage: "Drafts ({draft_count})"}, {draft_count});
     $(".compose_drafts_button").text(text);
+    const drafts_li = $(".top_left_drafts");
+    ui_util.update_unread_count_in_dom(drafts_li, count);
 }
 
 export const draft_model = (function () {

static/styles/left_sidebar.css

@@ -263,7 +263,8 @@ li.active-sub-filter {
         display: none;
     }
 
-    .top_left_starred_messages .unread_count {
+    .top_left_starred_messages .unread_count,
+    .top_left_drafts .unread_count {
         background-color: inherit;
         color: inherit;
         border: 0.5px solid hsl(105, 2%, 50%);
@@ -288,6 +289,7 @@ li.top_left_all_messages,
 .private_messages_header,
 li.top_left_mentions,
 li.top_left_starred_messages,
+li.top_left_drafts,
 li.top_left_recent_topics {
     position: relative;
     padding-top: 1px;

static/templates/left_sidebar.hbs

@@ -48,6 +48,16 @@
                 </a>
                 <span class="arrow starred-messages-sidebar-menu-icon"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span>
             </li>
+            <li class="top_left_drafts top_left_row hidden-for-spectators">
+                <a href="#drafts">
+                    <span class="filter-icon">
+                        <i class="fa fa-pencil" aria-hidden="true"></i>
+                    </span>
+                    {{~!-- squash whitespace --~}}
+                    <span>{{t 'Drafts' }}</span>
+                    <span class="unread_count"></span>
+                </a>
+            </li>
             <li class="top_left_recent_topics top_left_row" title="{{t 'Recent topics' }} (t)">
                 <a href="#recent_topics">
                     <span class="filter-icon">