From 0c29e067b49d7cd47e552850348bd0009aad9aa9 Mon Sep 17 00:00:00 2001
From: evykassirer <evy@zulip.com>
Date: Mon, 30 Sep 2024 14:40:59 -0700
Subject: [PATCH] buddy_list: Rotate the header triangle when collapsing a
 section.

---
 web/src/buddy_list.ts                       | 12 ++++++------
 web/styles/right_sidebar.css                | 15 ++++++++++++++-
 web/templates/buddy_list/section_header.hbs |  2 +-
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/web/src/buddy_list.ts b/web/src/buddy_list.ts
index 02da02daeb..d235be53cd 100644
--- a/web/src/buddy_list.ts
+++ b/web/src/buddy_list.ts
@@ -484,11 +484,11 @@ export class BuddyList extends BuddyListConf {
             this.participants_is_collapsed,
         );
         $("#buddy-list-participants-container .toggle-participants").toggleClass(
-            "fa-caret-down",
+            "rotate-icon-down",
             !this.participants_is_collapsed,
         );
         $("#buddy-list-participants-container .toggle-participants").toggleClass(
-            "fa-caret-right",
+            "rotate-icon-right",
             this.participants_is_collapsed,
         );
 
@@ -504,11 +504,11 @@ export class BuddyList extends BuddyListConf {
             this.users_matching_view_is_collapsed,
         );
         $("#buddy-list-users-matching-view-container .toggle-users-matching-view").toggleClass(
-            "fa-caret-down",
+            "rotate-icon-down",
             !this.users_matching_view_is_collapsed,
         );
         $("#buddy-list-users-matching-view-container .toggle-users-matching-view").toggleClass(
-            "fa-caret-right",
+            "rotate-icon-right",
             this.users_matching_view_is_collapsed,
         );
 
@@ -524,11 +524,11 @@ export class BuddyList extends BuddyListConf {
             this.other_users_is_collapsed,
         );
         $("#buddy-list-other-users-container .toggle-other-users").toggleClass(
-            "fa-caret-down",
+            "rotate-icon-down",
             !this.other_users_is_collapsed,
         );
         $("#buddy-list-other-users-container .toggle-other-users").toggleClass(
-            "fa-caret-right",
+            "rotate-icon-right",
             this.other_users_is_collapsed,
         );
 
diff --git a/web/styles/right_sidebar.css b/web/styles/right_sidebar.css
index 77f667d58e..4ca38ae18a 100644
--- a/web/styles/right_sidebar.css
+++ b/web/styles/right_sidebar.css
@@ -26,8 +26,21 @@ $user_status_emoji_width: 24px;
     overflow: auto;
 }
 
-.buddy-list-section-toggle {
+.buddy-list-section-toggle.fa-caret-right {
     width: 7px;
+    transition: rotate 140ms linear;
+    /* The triangle icon has asymmetrical padding on it, so
+       when it rotates down it would be too high without
+       this padding. */
+    padding-left: 2px;
+
+    &.rotate-icon-down {
+        rotate: 90deg;
+    }
+
+    &.rotate-icon-right {
+        rotate: 0deg;
+    }
 }
 
 .buddy-list-section-container {
diff --git a/web/templates/buddy_list/section_header.hbs b/web/templates/buddy_list/section_header.hbs
index cc93299a88..6c3a0db8e3 100644
--- a/web/templates/buddy_list/section_header.hbs
+++ b/web/templates/buddy_list/section_header.hbs
@@ -1,4 +1,4 @@
 <h5 id="{{id}}" data-user-count="{{user_count}}" class="buddy-list-heading no-style hidden-for-spectators">
     {{header_text}} (<span class="buddy-list-heading-user-count">{{user_count}}</span>)
 </h5>
-<i class="buddy-list-section-toggle {{toggle_class}} fa fa-sm {{#if is_collapsed}}fa-caret-right{{else}}fa-caret-down{{/if}}" aria-hidden="true"></i>
+<i class="buddy-list-section-toggle {{toggle_class}} fa fa-sm fa-caret-right {{#if is_collapsed}}rotate-icon-right{{else}}rotate-icon-down{{/if}}" aria-hidden="true"></i>