live-preview: Filter in Selection Popup

Add a filter into the Selection popup to filter out
anything not matching.

If all letters are lowercase, then it will do a case-insensitive
match, if there are non-lowercase characters it will do
case-sensitive matching instead.

REUSE.toml

@@ -159,6 +159,7 @@ path = [
   "tools/lsp/ui/assets/chevron-down.svg",
   "tools/lsp/ui/assets/inspect.svg",
   "tools/lsp/ui/assets/layout-sidebar**.svg",
+  "tools/lsp/ui/assets/search.svg",
   "tools/lsp/ui/assets/sync.svg",
 ]
 precedence = "aggregate"

tools/lsp/preview/element_selection.rs

@@ -444,6 +444,35 @@ pub fn selection_stack_at(
     Rc::new(slint::VecModel::from(result)).into()
 }
 
+pub fn filter_sort_selection_stack(
+    model: slint::ModelRc<crate::preview::ui::SelectionStackFrame>,
+    filter: slint::SharedString,
+) -> slint::ModelRc<crate::preview::ui::SelectionStackFrame> {
+    use slint::ModelExt;
+
+    eprintln!("filter: {filter}");
+
+    let filter = filter.to_string();
+
+    if filter.is_empty() {
+        model
+    } else if filter.as_str().chars().any(|c| !c.is_lowercase()) {
+        Rc::new(model.filter(move |frame| {
+            frame.id.contains(&filter)
+                || frame.type_name.contains(&filter)
+                || frame.file_name.contains(&filter)
+        }))
+        .into()
+    } else {
+        Rc::new(model.filter(move |frame| {
+            frame.id.to_lowercase().contains(&filter)
+                || frame.type_name.to_lowercase().contains(&filter)
+                || frame.file_name.to_lowercase().contains(&filter)
+        }))
+        .into()
+    }
+}
+
 pub fn parent_layout_kind(element: &common::ElementRcNode) -> ui::LayoutKind {
     element.parent().map(|p| p.layout_kind()).unwrap_or(ui::LayoutKind::None)
 }

tools/lsp/preview/ui.rs

@@ -72,6 +72,7 @@ pub fn create_ui(style: String, experimental: bool) -> Result<PreviewUi, Platfor
     api.on_reselect(super::element_selection::reselect_element);
     api.on_select_at(super::element_selection::select_element_at);
     api.on_selection_stack_at(super::element_selection::selection_stack_at);
+    api.on_filter_sort_selection_stack(super::element_selection::filter_sort_selection_stack);
     api.on_find_selected_selection_stack_frame(|stack| {
         stack.iter().find(|frame| frame.is_selected).unwrap_or_default()
     });

tools/lsp/ui/api.slint

@@ -404,6 +404,7 @@ export global Api {
 
     // ## Element selection:
     callback selection-stack-at(x: length, y: length) -> [SelectionStackFrame];
+    pure callback filter-sort-selection-stack(model: [SelectionStackFrame], filter: string) -> [SelectionStackFrame];
     pure callback find-selected-selection-stack-frame([SelectionStackFrame]) -> SelectionStackFrame;
     callback select-element(file: string, offset: int, x: length, y: length);
 

tools/lsp/ui/components/styling.slint

@@ -7,12 +7,12 @@ export global Icons {
     out property <image> add: @image-url("../assets/add.svg");
     out property <image> chevron-down: @image-url("../assets/chevron-down.svg");
     out property <image> inspect: @image-url("../assets/inspect.svg");
+    out property <image> search: @image-url("../assets/search.svg");
     out property <image> sidebar-left-off: @image-url("../assets/layout-sidebar-left-off.svg");
     out property <image> sidebar-right-off: @image-url("../assets/layout-sidebar-right-off.svg");
     out property <image> sidebar-left: @image-url("../assets/layout-sidebar-left.svg");
     out property <image> sidebar-right: @image-url("../assets/layout-sidebar-right.svg");
     out property <image> sync: @image-url("../assets/sync.svg");
-
 }
 
 export struct TextStyle {
@@ -56,7 +56,6 @@ export global EditorSpaceSettings {
     in property <length> default-spacing: 8px;
     in property <length> group-indent: 10px;
     in property <length> property-spacing: 5px;
-
 }
 
 export global EditorSizeSettings {