Messaging · Calls: controls, tiles, a grid, a shared screen, a bar, a ringing dialog, a huddle

CallControls holds the microphone, camera and a shared screen as
toggles, then Leave. ParticipantTile shows a camera's frame from the
host or the person's initials, their name with a mark when muted, and a
ring while they speak. VideoCallGrid lays tiles in even rows as far as
they fit across its measured width; a short last row centers at the
full rows' width. ScreenShareView names who presents and offers Stop
presenting for your own share, the call's tiles beside or below.
VoiceCallBar tells where a call is, how long it has run and who is in
it, with the microphone and Leave. IncomingCallDialog rings with the
caller's picture; Accept or Decline answers each ring once, and Escape
declines. HuddleIndicator rings while a huddle is live; a press joins.

The recorder's device toggle and the camera's name chip now have one
home in media. People: member names sort whatever their case, a
status's words save trimmed, and a profile card's local time ticks.

src/media/camera.rs

@@ -1,7 +1,7 @@
 use std::rc::Rc;
 
 use gpui::{
-    App, ElementId, ImageSource, IntoElement, ParentElement, RenderOnce, SharedString, Styled,
+    App, Div, ElementId, ImageSource, IntoElement, ParentElement, RenderOnce, SharedString, Styled,
     Window, div, img, prelude::*,
 };
 
@@ -12,6 +12,26 @@ use crate::{
     typography::Ellipsis,
 };
 
+/// A name's chip over a frame's lower corner, light on a dark wash.
+pub(crate) fn name_chip(cx: &App) -> Div {
+    let theme = cx.theme();
+    let colors = &theme.colors;
+    div()
+        .absolute()
+        .left_2()
+        .bottom_2()
+        .max_w(gpui::relative(0.8))
+        .flex()
+        .items_center()
+        .gap_1()
+        .px_2()
+        .py_0p5()
+        .rounded(theme.radius(Radius::Sm))
+        .bg(colors.media_backdrop.alpha(0.6))
+        .text_color(colors.on_media)
+        .text_size(theme.text_size(TextSize::Xs))
+}
+
 /// What a camera sees, in its own shape, from frames the host hands in; the host mirrors them if it will. With no frame it shows the camera off.
 #[derive(IntoElement)]
 pub struct CameraPreview {
@@ -58,18 +78,8 @@ impl RenderOnce for CameraPreview {
                 .rounded(round)
         });
         let name = self.name.map(|name| {
-            div()
+            name_chip(cx)
                 .debug_selector(|| "camera-name".into())
-                .absolute()
-                .left_2()
-                .bottom_2()
-                .max_w(gpui::relative(0.8))
-                .px_2()
-                .py_0p5()
-                .rounded(theme.radius(Radius::Sm))
-                .bg(colors.media_backdrop.alpha(0.6))
-                .text_color(colors.on_media)
-                .text_size(theme.text_size(TextSize::Xs))
                 .child(Ellipsis::new(name))
         });
         framed(self.ratio, cx)