From 2ed45d72d8aa8f6e9e64ea41982b01dbc2d4c1a1 Mon Sep 17 00:00:00 2001
From: Andrew Lygin <alygin@gmail.com>
Date: Mon, 5 Feb 2024 21:12:47 +0300
Subject: [PATCH] File finder UI enhancement (#7364)

File finder looks and feels a little bulky now. It duplicates file names
and consumes too much space for each file.

This PR makes it more compact:
- File name is trimmed from the path, removing duplication
- Path is placed to the right of the file name, improving space usage
- Path is muted and printed in small size to not distract attention from
the main information (file names)

It makes search results easier to look through, consistent with the
editor tabs, and closer in terms of usage to mature editors.

Release Notes:

- File finder UI enhancement
---
 crates/file_finder/src/file_finder.rs         | 19 ++++++++++++++++---
 crates/file_finder/src/file_finder_tests.rs   |  4 ++--
 .../src/components/label/highlighted_label.rs |  4 +++-
 crates/ui/src/components/label/label_like.rs  |  2 +-
 4 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/crates/file_finder/src/file_finder.rs b/crates/file_finder/src/file_finder.rs
index be3d2feb83098f6bd10aa936a32466717937179b..d222682e807531e25dbee1f0a9f4423895c74674 100644
--- a/crates/file_finder/src/file_finder.rs
+++ b/crates/file_finder/src/file_finder.rs
@@ -566,7 +566,7 @@ impl FileFinderDelegate {
         let path = &path_match.path;
         let path_string = path.to_string_lossy();
         let full_path = [path_match.path_prefix.as_ref(), path_string.as_ref()].join("");
-        let path_positions = path_match.positions.clone();
+        let mut path_positions = path_match.positions.clone();
 
         let file_name = path.file_name().map_or_else(
             || path_match.path_prefix.to_string(),
@@ -584,6 +584,14 @@ impl FileFinderDelegate {
             })
             .collect();
 
+        // Trim file name from the full path
+        let full_path = if full_path.len() > file_name.len() {
+            full_path[..full_path.len() - file_name.len() - 1].to_string()
+        } else {
+            "".to_string()
+        };
+        path_positions.retain(|idx| *idx < full_path.len());
+
         (file_name, file_name_positions, full_path, path_positions)
     }
 
@@ -868,9 +876,14 @@ impl PickerDelegate for FileFinderDelegate {
                 .inset(true)
                 .selected(selected)
                 .child(
-                    v_flex()
+                    h_flex()
+                        .gap_2()
                         .child(HighlightedLabel::new(file_name, file_name_positions))
-                        .child(HighlightedLabel::new(full_path, full_path_positions)),
+                        .child(
+                            HighlightedLabel::new(full_path, full_path_positions)
+                                .size(LabelSize::Small)
+                                .color(Color::Muted),
+                        ),
                 ),
         )
     }
diff --git a/crates/file_finder/src/file_finder_tests.rs b/crates/file_finder/src/file_finder_tests.rs
index 450d034614a859d13eb89afe9f6858c5386c6494..f0e1626bd4e8d47341758104998d67afdcbe8e3e 100644
--- a/crates/file_finder/src/file_finder_tests.rs
+++ b/crates/file_finder/src/file_finder_tests.rs
@@ -490,8 +490,8 @@ async fn test_single_file_worktrees(cx: &mut TestAppContext) {
             delegate.labels_for_path_match(&matches[0].0);
         assert_eq!(file_name, "the-file");
         assert_eq!(file_name_positions, &[0, 1, 4]);
-        assert_eq!(full_path, "the-file");
-        assert_eq!(full_path_positions, &[0, 1, 4]);
+        assert_eq!(full_path, "");
+        assert_eq!(full_path_positions, &[0; 0]);
     });
 
     // Since the worktree root is a file, searching for its name followed by a slash does
diff --git a/crates/ui/src/components/label/highlighted_label.rs b/crates/ui/src/components/label/highlighted_label.rs
index d70c2d1b51c82e426a508fb413a35d4f4b9e3a70..41866bd10af00cd86632a9deb7ca41a625faa2e3 100644
--- a/crates/ui/src/components/label/highlighted_label.rs
+++ b/crates/ui/src/components/label/highlighted_label.rs
@@ -79,6 +79,8 @@ impl RenderOnce for HighlightedLabel {
         let mut text_style = cx.text_style().clone();
         text_style.color = self.base.color.color(cx);
 
-        LabelLike::new().child(StyledText::new(self.label).with_highlights(&text_style, highlights))
+        LabelLike::new()
+            .size(self.base.size)
+            .child(StyledText::new(self.label).with_highlights(&text_style, highlights))
     }
 }
diff --git a/crates/ui/src/components/label/label_like.rs b/crates/ui/src/components/label/label_like.rs
index cddd849b89d7d15e6ebfa6367ad5829bfe4a709a..f08ff1bf833e80c1c1fed0b78066a48d350758a8 100644
--- a/crates/ui/src/components/label/label_like.rs
+++ b/crates/ui/src/components/label/label_like.rs
@@ -36,7 +36,7 @@ pub trait LabelCommon {
 
 #[derive(IntoElement)]
 pub struct LabelLike {
-    size: LabelSize,
+    pub(crate) size: LabelSize,
     line_height_style: LineHeightStyle,
     pub(crate) color: Color,
     strikethrough: bool,