stream-settings: Show icon according to in the right column title.

We were showing # for all types of streams in the title at the top
in the right column of stream settings overlay. This commit fixes
it to show globe icon for web-public streams and lock icon for
private streams.

frontend_tests/node_tests/stream_edit.js

@@ -128,6 +128,11 @@ test_ui("subscriber_pills", ({override_rewire, mock_template}) => {
         false,
         () => "stream_subscription_request_result",
     );
+    mock_template(
+        "stream_settings/selected_stream_title.hbs",
+        false,
+        () => "selected_stream_title",
+    );
 
     override_rewire(people, "sort_but_pin_current_user_on_top", noop);
 

static/js/stream_edit.js

@@ -138,7 +138,7 @@ export function open_edit_panel_for_row(stream_row) {
     const sub = get_sub_for_target(stream_row);
 
     $(".stream-row.active").removeClass("active");
-    stream_settings_ui.show_subs_pane.settings(sub.name);
+    stream_settings_ui.show_subs_pane.settings(sub.name, sub.invite_only, sub.is_web_public);
     $(stream_row).addClass("active");
     setup_subscriptions_stream_hash(sub);
     setup_stream_settings(stream_row);

static/js/stream_settings_ui.js

@@ -5,6 +5,7 @@ import tippy from "tippy.js";
 import render_unsubscribe_private_stream_modal from "../templates/confirm_dialog/confirm_unsubscribe_private_stream.hbs";
 import render_browse_streams_list from "../templates/stream_settings/browse_streams_list.hbs";
 import render_browse_streams_list_item from "../templates/stream_settings/browse_streams_list_item.hbs";
+import render_selected_stream_title from "../templates/stream_settings/selected_stream_title.hbs";
 import render_stream_settings from "../templates/stream_settings/stream_settings.hbs";
 import render_stream_settings_overlay from "../templates/stream_settings/stream_settings_overlay.hbs";
 
@@ -44,10 +45,16 @@ export const show_subs_pane = {
         $(".nothing-selected").show();
         $("#subscription_overlay .stream-info-title").text($t({defaultMessage: "Stream settings"}));
     },
-    settings(stream_name) {
+    settings(stream_name, invite_only, is_web_public) {
         $(".settings, #stream-creation").hide();
         $(".settings").show();
-        $("#subscription_overlay .stream-info-title").text("# " + stream_name);
+        $("#subscription_overlay .stream-info-title").html(
+            render_selected_stream_title({
+                stream_name,
+                invite_only,
+                is_web_public,
+            }),
+        );
     },
     create_stream() {
         $(".nothing-selected, .settings, #stream-creation").hide();

static/styles/subscriptions.css

@@ -522,6 +522,10 @@ h4.stream_setting_subsection_title {
                 line-height: 1;
                 margin: 9px 0;
                 font-weight: 600;
+
+                .large-icon {
+                    display: inline-block;
+                }
             }
         }
 
@@ -907,6 +911,8 @@ h4.stream_setting_subsection_title {
 
             &.hash::after {
                 top: 1px;
+                font-size: 1.09em;
+                font-weight: 800;
             }
         }
 
@@ -967,8 +973,6 @@ h4.stream_setting_subsection_title {
     .hash::after {
         position: relative;
         content: "#";
-        font-size: 1.09em;
-        font-weight: 800;
     }
 
     .settings {

static/templates/stream_settings/selected_stream_title.hbs

@@ -0,0 +1,4 @@
+{{> stream_privacy_icon
+  invite_only=invite_only
+  is_web_public=is_web_public }}
+<span class="stream-name-title">{{stream_name}}</span>