settings: Add UI page for managing muted users.

This page is temporarily hidden except in the development environment,
because the "muted users" feature is incomplete.

static/js/muting_ui.js

@@ -16,6 +16,7 @@ import * as people from "./people";
 import * as popovers from "./popovers";
 import * as recent_topics from "./recent_topics";
 import * as settings_muted_topics from "./settings_muted_topics";
+import * as settings_muted_users from "./settings_muted_users";
 import * as stream_data from "./stream_data";
 import * as stream_list from "./stream_list";
 import * as stream_popover from "./stream_popover";
@@ -195,7 +196,14 @@ export function unmute_user(user_id) {
     });
 }
 
+export function rerender_for_muted_user() {
+    if (overlays.settings_open() && settings_muted_users.loaded) {
+        settings_muted_users.populate_list();
+    }
+}
+
 export function handle_user_updates(muted_user_ids) {
     popovers.hide_all();
     muting.set_muted_users(muted_user_ids);
+    rerender_for_muted_user();
 }

static/js/settings_muted_users.js

@@ -0,0 +1,56 @@
+import $ from "jquery";
+
+import render_muted_user_ui_row from "../templates/muted_user_ui_row.hbs";
+
+import * as ListWidget from "./list_widget";
+import * as muting from "./muting";
+import * as muting_ui from "./muting_ui";
+import * as people from "./people";
+import * as ui from "./ui";
+
+export let loaded = false;
+
+export function populate_list() {
+    const muted_users = muting.get_muted_users().map((user) => ({
+        user_id: user.id,
+        user_name: people.get_full_name(user.id),
+        date_muted_str: user.date_muted_str,
+    }));
+    const muted_users_table = $("#muted_users_table");
+    const $search_input = $("#muted_users_search");
+
+    ListWidget.create(muted_users_table, muted_users, {
+        name: "muted-users-list",
+        modifier(muted_users) {
+            return render_muted_user_ui_row({muted_users});
+        },
+        filter: {
+            element: $search_input,
+            predicate(item, value) {
+                return item.user_name.toLocaleLowerCase().includes(value);
+            },
+            onupdate() {
+                ui.reset_scrollbar(muted_users_table.closest(".progressive-table-wrapper"));
+            },
+        },
+        parent_container: $("#muted-user-settings"),
+        simplebar_container: $("#muted-user-settings .progressive-table-wrapper"),
+    });
+}
+
+export function set_up() {
+    loaded = true;
+    $("body").on("click", ".settings-unmute-user", function (e) {
+        const $row = $(this).closest("tr");
+        const user_id = Number.parseInt($row.attr("data-user-id"), 10);
+
+        e.stopPropagation();
+        muting_ui.unmute_user(user_id);
+    });
+
+    populate_list();
+}
+
+export function reset() {
+    loaded = false;
+}

static/js/settings_sections.js

@@ -9,6 +9,7 @@ import * as settings_exports from "./settings_exports";
 import * as settings_invites from "./settings_invites";
 import * as settings_linkifiers from "./settings_linkifiers";
 import * as settings_muted_topics from "./settings_muted_topics";
+import * as settings_muted_users from "./settings_muted_users";
 import * as settings_notifications from "./settings_notifications";
 import * as settings_org from "./settings_org";
 import * as settings_playgrounds from "./settings_playgrounds";
@@ -51,6 +52,7 @@ export function initialize() {
     load_func_dict.set("alert-words", alert_words_ui.set_up_alert_words);
     load_func_dict.set("uploaded-files", attachments_ui.set_up_attachments);
     load_func_dict.set("muted-topics", settings_muted_topics.set_up);
+    load_func_dict.set("muted-users", settings_muted_users.set_up);
 
     // org
     load_func_dict.set("org_misc", settings_org.set_up);
@@ -99,5 +101,6 @@ export function reset_sections() {
     settings_streams.reset();
     settings_user_groups.reset();
     settings_muted_topics.reset();
+    settings_muted_users.reset();
     // settings_users doesn't need a reset()
 }