Add color ribbon for local player (#4075)

Marshall Bowers created 2 years ago

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.

Change summary

crates/collab_ui/src/collab_titlebar_item.rs | 24 ++++++++++++++-------
1 file changed, 16 insertions(+), 8 deletions(-)

Detailed changes

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;