user groups: Add user group rows in left for user group overlay.

static/js/user_groups_settings_ui.js

@@ -1,10 +1,14 @@
 import $ from "jquery";
 
+import render_browse_user_groups_list_item from "../templates/user_group_settings/browse_user_groups_list_item.hbs";
 import render_user_group_settings_overlay from "../templates/user_group_settings/user_group_settings_overlay.hbs";
 
 import * as browser_history from "./browser_history";
+import * as ListWidget from "./list_widget";
 import * as overlays from "./overlays";
+import * as people from "./people";
 import * as ui from "./ui";
+import * as user_groups from "./user_groups";
 
 export function setup_page(callback) {
     function populate_and_fill() {
@@ -14,6 +18,21 @@ export function setup_page(callback) {
         $manage_groups_container.empty();
         $manage_groups_container.append(rendered);
 
+        const $container = $("#manage_groups_container .user-groups-list");
+        const user_groups_list = user_groups.get_realm_user_groups();
+
+        ListWidget.create($container, user_groups_list, {
+            name: "user-groups-overlay",
+            modifier(item) {
+                item.is_member = user_groups.is_direct_member_of(
+                    people.my_current_user_id(),
+                    item.id,
+                );
+                return render_browse_user_groups_list_item(item);
+            },
+            $simplebar_container: $container,
+        });
+
         if (callback) {
             callback();
         }

static/styles/dark_theme.css

@@ -655,8 +655,10 @@ body.dark-theme {
 
     .subscriptions-container .right .display-type,
     .stream-row,
+    .group-row,
     .subscriptions-container .left .search-container,
     .subscriptions-container .left,
+    .user-groups-container .left,
     .subscriber-list-box,
     .subscriber-list-box .subscriber_list_container .subscriber-list tr,
     #subscription_overlay .subsection-parent div,

static/styles/subscriptions.css

@@ -454,6 +454,7 @@ h4.stream_setting_subsection_title {
     border-bottom: 1px solid hsl(0, 0%, 87%);
 }
 
+.user-groups-list,
 .streams-list {
     position: relative;
     overflow: auto;
@@ -462,6 +463,15 @@ h4.stream_setting_subsection_title {
     width: 100%;
 }
 
+.user-groups-list {
+    /*
+        This height rule is temporary for this preparatory commit and
+        will be removed as we add other search/filter widgets in groups list
+        and its styling similar to streams list.
+    */
+    height: 100% !important;
+}
+
 #clear_search_stream_name {
     right: 5px !important;
 }
@@ -486,7 +496,8 @@ h4.stream_setting_subsection_title {
     }
 }
 
-.stream-row {
+.stream-row,
+.group-row {
     padding: 15px 10px 11px;
     border-bottom: 1px solid hsl(0, 0%, 93%);
     cursor: pointer;
@@ -561,7 +572,8 @@ h4.stream_setting_subsection_title {
         }
     }
 
-    .sub-info-box {
+    .sub-info-box,
+    .group-info-box {
         width: calc(100% - 90px);
 
         .top-bar,
@@ -572,6 +584,7 @@ h4.stream_setting_subsection_title {
         }
 
         .top-bar .stream-name,
+        .top-bar .group-name,
         .bottom-bar .description {
             white-space: nowrap;
             overflow: hidden;
@@ -596,7 +609,8 @@ h4.stream_setting_subsection_title {
             vertical-align: top;
         }
 
-        .top-bar .stream-name {
+        .top-bar .stream-name,
+        .top-bar .group-name {
             font-weight: 600;
         }
 
@@ -636,7 +650,8 @@ h4.stream_setting_subsection_title {
     }
 }
 
-.stream-row .sub-info-box .description:empty::after {
+.stream-row .sub-info-box .description:empty::after,
+.group-row .group-info-box .description:empty::after {
     content: attr(data-no-description);
     font-style: italic;
     color: hsl(0, 0%, 67%);

static/templates/user_group_settings/browse_user_groups_list_item.hbs

@@ -0,0 +1,15 @@
+<div class="group-row" data-group-id="{{id}}" data-group-name="{{name}}">
+    <div class="check {{#if is_member }} checked {{else}} disabled {{/if}} sub_unsub_button">
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+            <path d="M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z"/>
+        </svg>
+    </div>
+    <div class="group-info-box">
+        <div class="top-bar">
+            <div class="group-name">{{name}}</div>
+        </div>
+        <div class="bottom-bar">
+            <div class="description rendered_markdown" data-no-description="{{t 'No description.'}}">{{description}}</div>
+        </div>
+    </div>
+</div>

static/templates/user_group_settings/user_group_settings_overlay.hbs

@@ -8,6 +8,12 @@
                     <span class="exit-sign">&times;</span>
                 </div>
             </div>
+            <div class="left">
+                <div class="user-groups-list" data-simplebar>
+                </div>
+            </div>
+            <div class="right">
+            </div>
         </div>
     </div>
 </div>

tools/linter_lib/custom_check.py

@@ -695,6 +695,7 @@ html_rules: List["Rule"] = [
             # exclude_pattern above handles color, but have other issues:
             "static/templates/draft.hbs",
             "static/templates/stream_settings/browse_streams_list_item.hbs",
+            "static/templates/user_group_settings/browse_user_groups_list_item.hbs",
             "static/templates/single_message.hbs",
             # Old-style email templates need to use inline style
             # attributes; it should be possible to clean these up