stream settings: Rearrange personal stream settings.

We rearrange the personal stream settings to show all the
notification settings together under a separate heading.

Fixes #19508.

static/js/stream_edit.js

@@ -517,10 +517,21 @@ export function show_settings_for(node) {
     const slim_sub = sub_store.get(stream_id);
     stream_data.clean_up_description(slim_sub);
     const sub = stream_settings_data.get_sub_for_settings(slim_sub);
+    const all_settings = stream_settings(sub);
+
+    const other_settings = [];
+    const notification_settings = all_settings.filter((setting) => {
+        if (setting.is_notification_setting) {
+            return true;
+        }
+        other_settings.push(setting);
+        return false;
+    });
 
     const html = render_stream_settings({
         sub,
-        settings: stream_settings(sub),
+        notification_settings,
+        other_settings,
         stream_post_policy_values: stream_data.stream_post_policy_values,
         message_retention_text: get_retention_policy_text_for_subscription_type(sub),
     });

static/templates/stream_settings/stream_settings.hbs

@@ -76,14 +76,14 @@
             </div>
             <div class="subscription-config">
                 <ul class="grey-box">
-                    {{#each settings}}
+                    {{#each other_settings}}
                     <li>
                         {{> stream_settings_checkbox
                           setting_name=name
                           is_checked=is_checked
                           is_muted=(lookup ../sub "is_muted")
                           stream_id=(lookup ../sub "stream_id")
-                          notification_setting=is_notification_setting
+                          notification_setting=false
                           disabled_realm_setting=disabled_realm_setting
                           is_disabled=is_disabled
                           label=label}}
@@ -96,6 +96,22 @@
                         </span>
                     </li>
                 </ul>
+                <h4>{{t "Notification settings" }}</h4>
+                <ul class="grey-box">
+                    {{#each notification_settings}}
+                    <li>
+                        {{> stream_settings_checkbox
+                          setting_name=name
+                          is_checked=is_checked
+                          is_muted=(lookup ../sub "is_muted")
+                          stream_id=(lookup ../sub "stream_id")
+                          notification_setting=true
+                          disabled_realm_setting=disabled_realm_setting
+                          is_disabled=is_disabled
+                          label=label}}
+                    </li>
+                    {{/each}}
+                </ul>
             </div>
         </div>