deactivated_user: Correctly display deactivated users in the right sidebar.

Fixes: #30797.

web/src/buddy_data.ts

@@ -51,7 +51,11 @@ export function set_is_searching_users(val: boolean): void {
     is_searching_users = val;
 }
 
-export function get_user_circle_class(user_id: number): string {
+export function get_user_circle_class(user_id: number, use_deactivated_circle = false): string {
+    if (use_deactivated_circle) {
+        return "user-circle-deactivated";
+    }
+
     const status = presence.get_status(user_id);
 
     switch (status) {
@@ -203,8 +207,11 @@ export type BuddyUserInfo = {
     faded?: boolean;
 };
 
-export function info_for(user_id: number): BuddyUserInfo {
-    const user_circle_class = get_user_circle_class(user_id);
+export function info_for(user_id: number, direct_message_recipients: Set<number>): BuddyUserInfo {
+    const is_deactivated = !people.is_person_active(user_id);
+    const is_dm = direct_message_recipients.has(user_id);
+
+    const user_circle_class = get_user_circle_class(user_id, is_deactivated && is_dm);
     const person = people.get_by_user_id(user_id);
 
     const status_emoji_info = user_status.get_status_emoji(user_id);
@@ -317,7 +324,8 @@ export function get_title_data(user_ids_string: string, is_group: boolean): Titl
 }
 
 export function get_items_for_users(user_ids: number[]): BuddyUserInfo[] {
-    const user_info = user_ids.map((user_id) => info_for(user_id));
+    const direct_message_recipients = narrow_state.pm_ids_set();
+    const user_info = user_ids.map((user_id) => info_for(user_id, direct_message_recipients));
     return user_info;
 }
 
@@ -365,6 +373,7 @@ function maybe_shrink_list(
 function filter_user_ids(user_filter_text: string, user_ids: number[]): number[] {
     // This first filter is for whether the user is eligible to be
     // displayed in the right sidebar at all.
+    const direct_message_recipients = narrow_state.pm_ids_set();
     user_ids = user_ids.filter((user_id) => {
         const person = people.maybe_get_user_by_id(user_id, true);
 
@@ -381,8 +390,9 @@ function filter_user_ids(user_filter_text: string, user_ids: number[]): number[]
             return false;
         }
 
-        if (!people.is_person_active(user_id)) {
-            // Deactivated users are hidden from the right sidebar entirely.
+        const is_dm = direct_message_recipients.has(user_id);
+        if (!people.is_person_active(user_id) && !is_dm) {
+            // Deactivated users are hidden in the buddy list except in DM narrows.
             return false;
         }
 

web/src/buddy_list.ts

@@ -53,7 +53,7 @@ function get_total_human_subscriber_count(
 
         let human_user_count = 0;
         for (const pm_id of all_recipient_user_ids_set) {
-            if (!people.is_valid_bot_user(pm_id) && people.is_person_active(pm_id)) {
+            if (!people.is_valid_bot_user(pm_id)) {
                 human_user_count += 1;
             }
         }

web/src/user_events.ts

@@ -217,8 +217,8 @@ export const update_person = function update(person: UserUpdate): void {
             stream_events.remove_deactivated_user_from_all_streams(person.user_id);
             user_group_edit.remove_deactivated_user_from_all_groups(person.user_id);
             settings_users.update_view_on_deactivate(person.user_id);
-            buddy_list.maybe_remove_user_id({user_id: person.user_id});
         }
+        buddy_list.insert_or_move([person.user_id]);
         settings_account.maybe_update_deactivate_account_button();
         if (people.is_valid_bot_user(person.user_id)) {
             settings_users.update_bot_data(person.user_id);

web/styles/right_sidebar.css

@@ -155,6 +155,11 @@
         line-height: 1;
         /* ...which is approximately 11px at 16px/1em. */
         font-size: 0.6875em;
+
+        &.user-circle-deactivated {
+            color: var(--color-user-circle-offline);
+            font-size: 0.85em;
+        }
     }
 
     .user_sidebar_entry.with_avatar {

web/templates/presence_row.hbs

@@ -1,7 +1,11 @@
 <li data-user-id="{{user_id}}" data-name="{{name}}" class="user_sidebar_entry {{#if user_list_style.WITH_AVATAR}}with_avatar{{/if}} {{#if has_status_text}}with_status{{/if}} {{#if is_current_user}}user_sidebar_entry_me {{/if}} narrow-filter {{#if faded}} user-fade {{/if}}">
     <div class="selectable_sidebar_block">
         {{#if user_list_style.WITH_STATUS}}
+            {{#if (eq user_circle_class "user-circle-deactivated")}}
+            <span class="fa fa-ban {{user_circle_class}} user-circle"></span>
+            {{else}}
             <span class="zulip-icon zulip-icon-{{user_circle_class}} {{user_circle_class}} user-circle"></span>
+            {{/if}}
             <a class="user-presence-link" href="{{href}}">
                 <div class="user-name-and-status-wrapper">
                     <div class="user-name-and-status-emoji">
@@ -14,7 +18,11 @@
         {{else if user_list_style.WITH_AVATAR}}
             <div class="user-profile-picture avatar-preload-background">
                 <img loading="lazy" src="{{profile_picture}}"/>
+                {{#if (eq user_circle_class "user-circle-deactivated")}}
+                <span class="fa fa-ban {{user_circle_class}} user-circle"></span>
+                {{else}}
                 <span class="zulip-icon zulip-icon-{{user_circle_class}} {{user_circle_class}} user-circle"></span>
+                {{/if}}
             </div>
             <a class="user-presence-link" href="{{href}}">
                 <div class="user-name-and-status-wrapper">

web/tests/buddy_data.test.cjs

@@ -175,6 +175,10 @@ test("user_circle, level", ({override}) => {
     set_presence(fred.user_id, undefined);
     assert.equal(buddy_data.get_user_circle_class(fred.user_id), "user-circle-offline");
     assert.equal(buddy_data.level(fred.user_id), 3);
+
+    set_presence(fred.user_id, undefined);
+    assert.equal(buddy_data.get_user_circle_class(fred.user_id, true), "user-circle-deactivated");
+    assert.equal(buddy_data.level(fred.user_id), 3);
 });
 
 test("title_data", ({override}) => {

web/tests/user_events.test.cjs

@@ -26,6 +26,15 @@ mock_esm("../src/user_profile", {
 });
 const stream_events = mock_esm("../src/stream_events");
 
+const buddy_list = mock_esm("../src/buddy_list", {
+    BuddyList: class {
+        insert_or_move = noop;
+    },
+});
+
+const buddy_data = new buddy_list.BuddyList();
+buddy_list.buddy_list = buddy_data;
+
 mock_esm("../src/activity_ui", {
     redraw() {},
 });
@@ -278,6 +287,7 @@ run_test("updates", ({override}) => {
         assert.equal(user_id, isaac.user_id);
         user_removed_from_streams = true;
     };
+    buddy_list.BuddyList.insert_or_move = noop;
     user_events.update_person({user_id: isaac.user_id, is_active: false});
     assert.ok(!people.is_person_active(isaac.user_id));
     assert.ok(user_removed_from_streams);