sidebar: Clarify which projects are remote in the UI (#52720)

Danilo Leal created 1 week ago

This PR adds a little server icon to the side of the project label to
clarify that's a remote project. This is particularly useful when having
the remote and non-remote version of a project open in the same
multi-workspace/window.

<img width="400" height="282" alt="Screenshot 2026-03-30 at 7  59@2x"
src="https://github.com/user-attachments/assets/9bb3e02e-a64d-412e-88ef-57b18fb5e13d"
/>

Release Notes:

- N/A

Change summary

crates/sidebar/src/sidebar.rs | 12 ++++++++++++
1 file changed, 12 insertions(+)

Detailed changes

crates/sidebar/src/sidebar.rs

@@ -1220,6 +1220,17 @@ impl Sidebar {
             .element_active
             .blend(color.element_background.opacity(0.2));
 
+        let is_remote = workspace.read(cx).project().read(cx).is_via_remote_server();
+        let remote_id = SharedString::from(format!("{id_prefix}-remote-project-{ix}"));
+        let remote_icon = div()
+            .id(remote_id)
+            .child(
+                Icon::new(IconName::Server)
+                    .size(IconSize::XSmall)
+                    .color(Color::Muted),
+            )
+            .tooltip(Tooltip::text("Remote Project"));
+
         h_flex()
             .id(id)
             .group(&group_name)
@@ -1251,6 +1262,7 @@ impl Sidebar {
                         ),
                     )
                     .child(label)
+                    .when(is_remote, |this| this.child(remote_icon))
                     .when(is_collapsed, |this| {
                         this.when(has_running_threads, |this| {
                             this.child(