Fiddle with titlebar item spacing

Co-Authored-By: Max Brunsfeld <max@zed.dev>

crates/collab_ui/src/collab_titlebar_item.rs

@@ -71,12 +71,15 @@ impl View for CollabTitlebarItem {
         };
 
         let project = workspace.read(cx).project().read(cx);
-        let mut worktree_root_names = String::new();
+        let mut project_title = String::new();
         for (i, name) in project.worktree_root_names(cx).enumerate() {
             if i > 0 {
-                worktree_root_names.push_str(", ");
+                project_title.push_str(", ");
             }
-            worktree_root_names.push_str(name);
+            project_title.push_str(name);
+        }
+        if project_title.is_empty() {
+            project_title = "empty project".to_owned();
         }
 
         let theme = cx.global::<Settings>().theme.clone();
@@ -85,7 +88,9 @@ impl View for CollabTitlebarItem {
         let mut left_container = Flex::row();
 
         left_container.add_child(
-            Label::new(worktree_root_names, theme.workspace.titlebar.title.clone())
+            Label::new(project_title, theme.workspace.titlebar.title.clone())
+                .contained()
+                .with_margin_right(theme.workspace.titlebar.item_spacing)
                 .aligned()
                 .left()
                 .boxed(),
@@ -118,6 +123,8 @@ impl View for CollabTitlebarItem {
                     theme.workspace.titlebar.title.clone(),
                 )
                 .aligned()
+                .contained()
+                .with_margin_left(theme.workspace.titlebar.item_spacing)
                 .boxed(),
             );
         } else {
@@ -452,8 +459,7 @@ impl CollabTitlebarItem {
                 ))
                 .aligned()
                 .contained()
-                .with_margin_left(theme.workspace.titlebar.avatar_margin)
-                .with_margin_right(theme.workspace.titlebar.avatar_margin)
+                .with_margin_left(theme.workspace.titlebar.item_spacing)
                 .boxed(),
         )
     }
@@ -501,8 +507,7 @@ impl CollabTitlebarItem {
             ))
             .aligned()
             .contained()
-            .with_margin_left(theme.workspace.titlebar.avatar_margin)
-            .with_margin_right(theme.workspace.titlebar.avatar_margin)
+            .with_margin_left(theme.workspace.titlebar.item_spacing)
             .boxed()
     }
 
@@ -557,15 +562,19 @@ impl CollabTitlebarItem {
                     .get(&participant.peer_id)
                     .map(|collaborator| collaborator.replica_id);
                 let user = participant.user.clone();
-                Some(self.render_face_pile(
-                    &user,
-                    replica_id,
-                    participant.peer_id,
-                    Some(participant.location),
-                    workspace,
-                    theme,
-                    cx,
-                ))
+                Some(
+                    Container::new(self.render_face_pile(
+                        &user,
+                        replica_id,
+                        participant.peer_id,
+                        Some(participant.location),
+                        workspace,
+                        theme,
+                        cx,
+                    ))
+                    .with_margin_left(theme.workspace.titlebar.face_pile_spacing)
+                    .boxed(),
+                )
             })
             .collect()
     }
@@ -597,6 +606,7 @@ impl CollabTitlebarItem {
             Label::new("Sign in", style.text.clone())
                 .contained()
                 .with_style(style.container)
+                .with_margin_left(theme.workspace.titlebar.item_spacing)
                 .boxed()
         })
         .on_click(MouseButton::Left, |_, cx| cx.dispatch_action(Authenticate))
@@ -725,8 +735,6 @@ impl CollabTitlebarItem {
                         .boxed(),
                 )
             })())
-            .contained()
-            .with_margin_left(theme.workspace.titlebar.avatar_margin)
             .boxed();
 
         if let Some(location) = location {

crates/theme/src/theme.rs

@@ -74,7 +74,8 @@ pub struct Titlebar {
     pub container: ContainerStyle,
     pub height: f32,
     pub title: TextStyle,
-    pub avatar_margin: f32,
+    pub item_spacing: f32,
+    pub face_pile_spacing: f32,
     pub avatar_ribbon: AvatarRibbon,
     pub follower_avatar_overlap: f32,
     pub leader_selection: ContainerStyle,

styles/src/styleTree/workspace.ts

@@ -12,7 +12,7 @@ import tabBar from "./tabBar";
 
 export default function workspace(colorScheme: ColorScheme) {
   const layer = colorScheme.lowest;
-  const titlebarPadding = 6;
+  const itemSpacing = 8;
   const titlebarButton = {
     cornerRadius: 6,
     padding: {
@@ -83,13 +83,14 @@ export default function workspace(colorScheme: ColorScheme) {
     },
     statusBar: statusBar(colorScheme),
     titlebar: {
-      avatarMargin: 8,
+      itemSpacing,
+      facePileSpacing: 2,
       height: 33, // 32px + 1px for overlaid border
       background: background(layer),
       border: border(layer, { bottom: true, overlay: true }),
       padding: {
         left: 80,
-        right: titlebarPadding,
+        right: itemSpacing,
       },
 
       // Project
@@ -146,7 +147,7 @@ export default function workspace(colorScheme: ColorScheme) {
         color: foreground(layer, "variant"),
         width: 16,
         margin: {
-          left: titlebarPadding,
+          left: itemSpacing,
         },
         padding: {
           right: 4,
@@ -159,7 +160,7 @@ export default function workspace(colorScheme: ColorScheme) {
         background: withOpacity(background(layer, "warning"), 0.3),
         border: border(layer, "warning"),
         margin: {
-          left: titlebarPadding,
+          left: itemSpacing,
         },
         padding: {
           left: 8,
@@ -178,7 +179,7 @@ export default function workspace(colorScheme: ColorScheme) {
         },
       },
       toggleContactsButton: {
-        margin: { left: 6 },
+        margin: { left: itemSpacing },
         cornerRadius: 6,
         color: foreground(layer, "variant"),
         iconWidth: 8,