Rework file picker for SSH modal (#19020)

This PR changes the SSH modal design so its more keyboard
navigation-friendly and adds the server nickname feature.

Release Notes:

- N/A

---------

Co-authored-by: Danilo <danilo@zed.dev>
Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>

Cargo.lock

@@ -8968,6 +8968,7 @@ dependencies = [
  "client",
  "dev_server_projects",
  "editor",
+ "file_finder",
  "futures 0.3.30",
  "fuzzy",
  "gpui",
@@ -8988,7 +8989,6 @@ dependencies = [
  "task",
  "terminal_view",
  "ui",
- "ui_input",
  "util",
  "workspace",
 ]

assets/keymaps/default-macos.json

@@ -395,6 +395,7 @@
       // Change the default action on `menu::Confirm` by setting the parameter
       // "alt-cmd-o": ["projects::OpenRecent", {"create_new_window": true }],
       "alt-cmd-o": "projects::OpenRecent",
+      "ctrl-cmd-o": "projects::OpenRemote",
       "alt-cmd-b": "branches::OpenRecent",
       "ctrl-~": "workspace::NewTerminal",
       "cmd-s": "workspace::Save",

crates/file_finder/src/file_finder.rs

@@ -5,6 +5,8 @@ mod file_finder_settings;
 mod new_path_prompt;
 mod open_path_prompt;
 
+pub use open_path_prompt::OpenPathDelegate;
+
 use collections::HashMap;
 use editor::{scroll::Autoscroll, Bias, Editor};
 use file_finder_settings::FileFinderSettings;

crates/file_finder/src/open_path_prompt.rs

@@ -26,6 +26,20 @@ pub struct OpenPathDelegate {
     should_dismiss: bool,
 }
 
+impl OpenPathDelegate {
+    pub fn new(tx: oneshot::Sender<Option<Vec<PathBuf>>>, lister: DirectoryLister) -> Self {
+        Self {
+            tx: Some(tx),
+            lister,
+            selected_index: 0,
+            directory_state: None,
+            matches: Vec::new(),
+            cancel_flag: Arc::new(AtomicBool::new(false)),
+            should_dismiss: true,
+        }
+    }
+}
+
 struct DirectoryState {
     path: String,
     match_candidates: Vec<StringMatchCandidate>,
@@ -48,15 +62,7 @@ impl OpenPathPrompt {
         cx: &mut ViewContext<Workspace>,
     ) {
         workspace.toggle_modal(cx, |cx| {
-            let delegate = OpenPathDelegate {
-                tx: Some(tx),
-                lister: lister.clone(),
-                selected_index: 0,
-                directory_state: None,
-                matches: Vec::new(),
-                cancel_flag: Arc::new(AtomicBool::new(false)),
-                should_dismiss: true,
-            };
+            let delegate = OpenPathDelegate::new(tx, lister.clone());
 
             let picker = Picker::uniform_list(delegate, cx).width(rems(34.));
             let query = lister.default_query(cx);

crates/gpui/src/shared_string.rs

@@ -1,5 +1,6 @@
 use derive_more::{Deref, DerefMut};
 
+use schemars::JsonSchema;
 use serde::{Deserialize, Serialize};
 use std::{borrow::Borrow, sync::Arc};
 use util::arc_cow::ArcCow;
@@ -16,6 +17,16 @@ impl SharedString {
     }
 }
 
+impl JsonSchema for SharedString {
+    fn schema_name() -> String {
+        String::schema_name()
+    }
+
+    fn json_schema(gen: &mut schemars::gen::SchemaGenerator) -> schemars::schema::Schema {
+        String::json_schema(gen)
+    }
+}
+
 impl Default for SharedString {
     fn default() -> Self {
         Self(ArcCow::Owned(Arc::default()))

crates/gpui/src/window.rs

@@ -4905,6 +4905,12 @@ impl From<(&'static str, usize)> for ElementId {
     }
 }
 
+impl From<(SharedString, usize)> for ElementId {
+    fn from((name, id): (SharedString, usize)) -> Self {
+        ElementId::NamedInteger(name, id)
+    }
+}
+
 impl From<(&'static str, u64)> for ElementId {
     fn from((name, id): (&'static str, u64)) -> Self {
         ElementId::NamedInteger(name.into(), id as usize)

crates/picker/src/picker.rs

@@ -476,7 +476,7 @@ impl<D: PickerDelegate> Picker<D> {
         }
     }
 
-    pub fn set_query(&self, query: impl Into<Arc<str>>, cx: &mut ViewContext<Self>) {
+    pub fn set_query(&self, query: impl Into<Arc<str>>, cx: &mut WindowContext<'_>) {
         if let Head::Editor(ref editor) = &self.head {
             editor.update(cx, |editor, cx| {
                 editor.set_text(query, cx);

crates/recent_projects/Cargo.toml

@@ -18,6 +18,7 @@ auto_update.workspace = true
 release_channel.workspace = true
 client.workspace = true
 editor.workspace = true
+file_finder.workspace = true
 futures.workspace = true
 fuzzy.workspace = true
 gpui.workspace = true
@@ -36,7 +37,6 @@ smol.workspace = true
 task.workspace = true
 terminal_view.workspace = true
 ui.workspace = true
-ui_input.workspace = true
 util.workspace = true
 workspace.workspace = true
 

crates/recent_projects/src/ssh_connections.rs

@@ -16,9 +16,9 @@ use schemars::JsonSchema;
 use serde::{Deserialize, Serialize};
 use settings::{Settings, SettingsSources};
 use ui::{
-    div, h_flex, prelude::*, v_flex, ActiveTheme, ButtonCommon, Clickable, Color, Icon, IconButton,
-    IconName, IconSize, InteractiveElement, IntoElement, Label, LabelCommon, Styled, Tooltip,
-    ViewContext, VisualContext, WindowContext,
+    div, h_flex, prelude::*, v_flex, ActiveTheme, Color, Icon, IconName, IconSize,
+    InteractiveElement, IntoElement, Label, LabelCommon, Styled, ViewContext, VisualContext,
+    WindowContext,
 };
 use workspace::{AppState, ModalView, Workspace};
 
@@ -35,17 +35,20 @@ impl SshSettings {
 
 #[derive(Clone, Default, Serialize, Deserialize, JsonSchema)]
 pub struct SshConnection {
-    pub host: String,
+    pub host: SharedString,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub username: Option<String>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub port: Option<u16>,
     pub projects: Vec<SshProject>,
+    /// Name to use for this server in UI.
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub nickname: Option<SharedString>,
 }
 impl From<SshConnection> for SshConnectionOptions {
     fn from(val: SshConnection) -> Self {
         SshConnectionOptions {
-            host: val.host,
+            host: val.host.into(),
             username: val.username,
             port: val.port,
             password: None,
@@ -87,7 +90,10 @@ pub struct SshConnectionModal {
 }
 
 impl SshPrompt {
-    pub fn new(connection_options: &SshConnectionOptions, cx: &mut ViewContext<Self>) -> Self {
+    pub(crate) fn new(
+        connection_options: &SshConnectionOptions,
+        cx: &mut ViewContext<Self>,
+    ) -> Self {
         let connection_string = connection_options.connection_string().into();
         Self {
             connection_string,
@@ -231,12 +237,57 @@ impl SshConnectionModal {
     }
 }
 
+pub(crate) struct SshConnectionHeader {
+    pub(crate) connection_string: SharedString,
+    pub(crate) nickname: Option<SharedString>,
+}
+
+impl RenderOnce for SshConnectionHeader {
+    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
+        let theme = cx.theme();
+
+        let mut header_color = theme.colors().text;
+        header_color.fade_out(0.96);
+
+        let (main_label, meta_label) = if let Some(nickname) = self.nickname {
+            (nickname, Some(format!("({})", self.connection_string)))
+        } else {
+            (self.connection_string, None)
+        };
+
+        h_flex()
+            .p_1()
+            .rounded_t_md()
+            .w_full()
+            .gap_2()
+            .justify_center()
+            .border_b_1()
+            .border_color(theme.colors().border_variant)
+            .bg(header_color)
+            .child(Icon::new(IconName::Server).size(IconSize::XSmall))
+            .child(
+                h_flex()
+                    .gap_1()
+                    .child(
+                        Label::new(main_label)
+                            .size(ui::LabelSize::Small)
+                            .single_line(),
+                    )
+                    .children(meta_label.map(|label| {
+                        Label::new(label)
+                            .size(ui::LabelSize::Small)
+                            .single_line()
+                            .color(Color::Muted)
+                    })),
+            )
+    }
+}
+
 impl Render for SshConnectionModal {
     fn render(&mut self, cx: &mut ui::ViewContext<Self>) -> impl ui::IntoElement {
         let connection_string = self.prompt.read(cx).connection_string.clone();
         let theme = cx.theme();
-        let mut header_color = cx.theme().colors().text;
-        header_color.fade_out(0.96);
+
         let body_color = theme.colors().editor_background;
 
         v_flex()
@@ -248,36 +299,11 @@ impl Render for SshConnectionModal {
             .border_1()
             .border_color(theme.colors().border)
             .child(
-                h_flex()
-                    .relative()
-                    .p_1()
-                    .rounded_t_md()
-                    .border_b_1()
-                    .border_color(theme.colors().border)
-                    .bg(header_color)
-                    .justify_between()
-                    .child(
-                        div().absolute().left_0p5().top_0p5().child(
-                            IconButton::new("ssh-connection-cancel", IconName::ArrowLeft)
-                                .icon_size(IconSize::XSmall)
-                                .on_click(cx.listener(move |this, _, cx| {
-                                    this.dismiss(&Default::default(), cx);
-                                }))
-                                .tooltip(|cx| Tooltip::for_action("Back", &menu::Cancel, cx)),
-                        ),
-                    )
-                    .child(
-                        h_flex()
-                            .w_full()
-                            .gap_2()
-                            .justify_center()
-                            .child(Icon::new(IconName::Server).size(IconSize::XSmall))
-                            .child(
-                                Label::new(connection_string)
-                                    .size(ui::LabelSize::Small)
-                                    .single_line(),
-                            ),
-                    ),
+                SshConnectionHeader {
+                    connection_string,
+                    nickname: None,
+                }
+                .render(cx),
             )
             .child(
                 h_flex()

crates/title_bar/src/title_bar.rs

@@ -293,15 +293,20 @@ impl TitleBar {
 
         let meta = SharedString::from(meta);
 
-        let indicator = div()
+        let indicator = h_flex()
+            // We're using the circle inside a circle approach because, otherwise, by using borders
+            // we'd get a very thin, leaking indicator color, which is not what we want.
             .absolute()
             .size_2p5()
             .right_0()
             .bottom_0()
+            .bg(indicator_border_color)
+            .size_2p5()
             .rounded_full()
-            .border_2()
-            .border_color(indicator_border_color)
-            .bg(indicator_color.color(cx));
+            .items_center()
+            .justify_center()
+            .overflow_hidden()
+            .child(Indicator::dot().color(indicator_color));
 
         Some(
             div()

crates/ui/src/components/list/list_item.rs

@@ -193,6 +193,7 @@ impl RenderOnce for ListItem {
                     .id("inner_list_item")
                     .w_full()
                     .relative()
+                    .items_center()
                     .gap_1()
                     .px(Spacing::Medium.rems(cx))
                     .map(|this| match self.spacing {
@@ -247,7 +248,7 @@ impl RenderOnce for ListItem {
                             .flex_grow()
                             .flex_shrink_0()
                             .flex_basis(relative(0.25))
-                            .gap(Spacing::Small.rems(cx))
+                            .gap(Spacing::Medium.rems(cx))
                             .map(|list_content| {
                                 if self.overflow_x {
                                     list_content