From 9903b7ae6ecd02f0ebbfb138ab0d904adb83d7ec Mon Sep 17 00:00:00 2001
From: Marshall Bowers <elliott.codes@gmail.com>
Date: Tue, 16 Jan 2024 15:17:29 -0500
Subject: [PATCH] Add color ribbon for local player (#4075)

This PR adds a color ribbon for the local player in the current call.

This fixes the alignment of the local user's avatar so that it lines up
with the rest of the collaborators in the call:

<img width="307" alt="Screenshot 2024-01-16 at 2 56 04 PM"
src="https://github.com/zed-industries/zed/assets/1486634/979ee3fa-70c9-482a-9351-020402ad68b9">

Release Notes:

- Added a color ribbon for the local player when in a call.
---
 crates/collab_ui/src/collab_titlebar_item.rs | 24 +++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/crates/collab_ui/src/collab_titlebar_item.rs b/crates/collab_ui/src/collab_titlebar_item.rs
index 432f8f6cd242b3b7bbeb53464de98980b4079e47..72b16d49185f6928ca9195c6159e7395add273d2 100644
--- a/crates/collab_ui/src/collab_titlebar_item.rs
+++ b/crates/collab_ui/src/collab_titlebar_item.rs
@@ -1,7 +1,7 @@
 use crate::face_pile::FacePile;
 use auto_update::AutoUpdateStatus;
 use call::{ActiveCall, ParticipantLocation, Room};
-use client::{proto::PeerId, Client, ParticipantIndex, User, UserStore};
+use client::{proto::PeerId, Client, User, UserStore};
 use gpui::{
     actions, canvas, div, point, px, rems, Action, AnyElement, AppContext, Element, Hsla,
     InteractiveElement, IntoElement, Model, ParentElement, Path, Render,
@@ -12,7 +12,7 @@ use project::{Project, RepositoryEntry};
 use recent_projects::RecentProjects;
 use rpc::proto;
 use std::sync::Arc;
-use theme::{ActiveTheme, PlayerColors};
+use theme::ActiveTheme;
 use ui::{
     h_flex, popover_menu, prelude::*, Avatar, Button, ButtonLike, ButtonStyle, ContextMenu, Icon,
     IconButton, IconName, TintColor, Tooltip,
@@ -97,7 +97,7 @@ impl Render for CollabTitlebarItem {
                                 room.remote_participants().values().collect::<Vec<_>>();
                             remote_participants.sort_by_key(|p| p.participant_index.0);
 
-                            this.children(self.render_collaborator(
+                            let current_user_face_pile = self.render_collaborator(
                                 &current_user,
                                 peer_id,
                                 true,
@@ -107,7 +107,13 @@ impl Render for CollabTitlebarItem {
                                 project_id,
                                 &current_user,
                                 cx,
-                            ))
+                            );
+
+                            this.children(current_user_face_pile.map(|face_pile| {
+                                v_flex()
+                                    .child(face_pile)
+                                    .child(render_color_ribbon(player_colors.local().cursor))
+                            }))
                             .children(
                                 remote_participants.iter().filter_map(|collaborator| {
                                     let is_present = project_id.map_or(false, |project_id| {
@@ -132,8 +138,11 @@ impl Render for CollabTitlebarItem {
                                             .id(("collaborator", collaborator.user.id))
                                             .child(face_pile)
                                             .child(render_color_ribbon(
-                                                collaborator.participant_index,
-                                                player_colors,
+                                                player_colors
+                                                    .color_for_participant(
+                                                        collaborator.participant_index.0,
+                                                    )
+                                                    .cursor,
                                             ))
                                             .cursor_pointer()
                                             .on_click({
@@ -312,8 +321,7 @@ impl Render for CollabTitlebarItem {
     }
 }
 
-fn render_color_ribbon(participant_index: ParticipantIndex, colors: &PlayerColors) -> gpui::Canvas {
-    let color = colors.color_for_participant(participant_index.0).cursor;
+fn render_color_ribbon(color: Hsla) -> gpui::Canvas {
     canvas(move |bounds, cx| {
         let height = bounds.size.height;
         let horizontal_offset = height;