compose_typeahead: Show emojis in stream description typeahead.

Uses markdown rendered version of description instead of plain description
text in stream typeahead.

web/src/typeahead_helper.ts

@@ -85,6 +85,7 @@ type StreamData = {
     color: string;
     name: string;
     description: string;
+    rendered_description: string;
     subscribed: boolean;
 };
 
@@ -94,6 +95,7 @@ export function render_typeahead_item(args: {
     img_src?: string;
     status_emoji_info?: UserStatusEmojiInfo | undefined;
     secondary?: string | null;
+    secondary_html?: string | undefined;
     pronouns?: string | undefined;
     is_user_group?: boolean;
     stream?: StreamData;
@@ -103,12 +105,14 @@ export function render_typeahead_item(args: {
     const has_image = args.img_src !== undefined;
     const has_status = args.status_emoji_info !== undefined;
     const has_secondary = args.secondary !== undefined;
+    const has_secondary_html = args.secondary_html !== undefined;
     const has_pronouns = args.pronouns !== undefined;
     return render_typeahead_list_item({
         ...args,
         has_image,
         has_status,
         has_secondary,
+        has_secondary_html,
         has_pronouns,
     });
 }
@@ -166,15 +170,8 @@ export function render_person_or_user_group(
 }
 
 export function render_stream(stream: StreamData): string {
-    let desc = stream.description;
-    const short_desc = desc.slice(0, 35);
-
-    if (desc !== short_desc) {
-        desc = short_desc + "...";
-    }
-
     return render_typeahead_item({
-        secondary: desc,
+        secondary_html: stream.rendered_description,
         stream,
         is_unsubscribed: !stream.subscribed,
     });

web/styles/compose.css

@@ -151,6 +151,10 @@
 .autocomplete_secondary {
     opacity: 0.8;
     font-size: 85%;
+
+    & code {
+        display: inline-block;
+    }
 }
 
 .active .autocomplete_secondary {

web/styles/zulip.css

@@ -805,6 +805,8 @@ strong {
             padding: 3px 10px;
             gap: 5px;
             font-weight: normal;
+            /* We want to keep this `max-width` less than 320px. */
+            max-width: 292px;
             line-height: 20px;
             color: var(--color-dropdown-item);
             white-space: nowrap;
@@ -838,6 +840,9 @@ strong {
 
             .typeahead-text-container {
                 align-self: center;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
 
                 & > * {
                     margin-right: 3px;
@@ -1358,8 +1363,6 @@ div.focused-message-list {
             display: block;
             float: right;
             margin-top: 5px;
-            margin-right: -12px;
-            font-size: 0.8em;
             color: hsl(96deg 7% 73%);
         }
     }

web/templates/typeahead_list_item.hbs

@@ -17,7 +17,7 @@
     <i class="typeahead-image zulip-icon zulip-icon-triple-users no-presence-circle" aria-hidden="true"></i>
 {{/if}}
 {{!-- Separate container to ensure overflowing text remains in this container. --}}
-<div class="typeahead-text-container">
+<div class="typeahead-text-container{{#if has_secondary_html}} has_secondary_html{{/if}}">
     <strong class="typeahead-strong-section">
         {{~#if stream~}}
             {{~> inline_decorated_stream_name stream=stream ~}}
@@ -34,13 +34,15 @@
     {{~#if has_status}}
     {{> status_emoji status_emoji_info}}
     {{~/if}}
-    {{~#if has_secondary}}
+    {{~#if has_secondary_html}}
+    <small class="autocomplete_secondary rendered_markdown">{{{secondary_html}}}</small>
+    {{~else if has_secondary}}
     <small class="autocomplete_secondary">
         {{~ secondary ~}}
     </small>
+    {{~/if}}
     {{#if is_unsubscribed}}
     <span class="fa fa-exclamation-triangle unsubscribed_icon"
       title="{{t 'You are not currently subscribed to this channel.' }}"></span>
     {{/if}}
-    {{~/if}}
 </div>

web/tests/composebox_typeahead.test.js

@@ -1136,7 +1136,7 @@ test("initialize", ({override, override_rewire, mock_template}) => {
                     `    <span class="user_circle_empty user_circle"></span>\n` +
                     `    <img class="typeahead-image" src="http://zulip.zulipdev.com/avatar/${othello.user_id}?s&#x3D;50" />\n` +
                     '<div class="typeahead-text-container">\n' +
-                    '    <strong class="typeahead-strong-section">Othello, the Moor of Venice</strong>    <small class="autocomplete_secondary">othello@zulip.com</small>\n' +
+                    '    <strong class="typeahead-strong-section">Othello, the Moor of Venice</strong>    <small class="autocomplete_secondary">othello@zulip.com</small>' +
                     "</div>\n";
                 assert.equal(actual_value, expected_value);
                 // Reset the email such that this does not affect further tests.
@@ -1148,7 +1148,7 @@ test("initialize", ({override, override_rewire, mock_template}) => {
                 expected_value =
                     '    <i class="typeahead-image zulip-icon zulip-icon-triple-users no-presence-circle" aria-hidden="true"></i>\n' +
                     '<div class="typeahead-text-container">\n' +
-                    '    <strong class="typeahead-strong-section">hamletcharacters</strong>    <small class="autocomplete_secondary">Characters of Hamlet</small>\n' +
+                    '    <strong class="typeahead-strong-section">hamletcharacters</strong>    <small class="autocomplete_secondary">Characters of Hamlet</small>' +
                     "</div>\n";
                 assert.equal(actual_value, expected_value);
 

web/tests/typeahead_helper.test.js

@@ -834,34 +834,15 @@ test("render_stream", ({mock_template}) => {
     // Test render_stream with short description
     let rendered = false;
     const stream = {
-        description: "This is a short description.",
+        description: "This is the description of the test stream.",
+        rendered_description: "This is the description of the test stream.",
         stream_id: 42,
-        name: "Short description",
+        name: "test stream",
     };
 
     mock_template("typeahead_list_item.hbs", false, (args) => {
         assert.equal(args.stream, stream);
-        assert.equal(args.secondary, stream.description);
+        assert.equal(args.secondary_html, stream.rendered_description);
-        rendered = true;
-        return "typeahead-item-stub";
-    });
-    assert.equal(th.render_stream(stream), "typeahead-item-stub");
-    assert.ok(rendered);
-});
-
-test("render_stream w/long description", ({mock_template}) => {
-    // Test render_stream with long description
-    let rendered = false;
-    const stream = {
-        description: "This is a very very very very very long description.",
-        stream_id: 43,
-        name: "Long description",
-    };
-
-    mock_template("typeahead_list_item.hbs", false, (args) => {
-        assert.equal(args.stream, stream);
-        const short_desc = stream.description.slice(0, 35);
-        assert.equal(args.secondary, short_desc + "...");
         rendered = true;
         return "typeahead-item-stub";
     });
@@ -878,6 +859,7 @@ test("render_emoji", ({mock_template}) => {
         has_image: false,
         has_pronouns: false,
         has_secondary: false,
+        has_secondary_html: false,
         has_status: false,
     };
     let rendered = false;
@@ -905,6 +887,7 @@ test("render_emoji", ({mock_template}) => {
         has_image: true,
         has_pronouns: false,
         has_secondary: false,
+        has_secondary_html: false,
         has_status: false,
     };
     test_emoji = {