live-preview: Sort selection popup by area of elements

This is an alternate mode in the selection popup, click on
the button next to the search bar to activate.

REUSE.toml

@@ -160,6 +160,7 @@ path = [
   "tools/lsp/ui/assets/chevron-down.svg",
   "tools/lsp/ui/assets/filter.svg",
   "tools/lsp/ui/assets/inspect.svg",
+  "tools/lsp/ui/assets/list-filter.svg",
   "tools/lsp/ui/assets/layout-sidebar**.svg",
   "tools/lsp/ui/assets/search.svg",
   "tools/lsp/ui/assets/sync.svg",

tools/lsp/preview/element_selection.rs

@@ -448,6 +448,7 @@ pub fn filter_sort_selection_stack(
     model: slint::ModelRc<crate::preview::ui::SelectionStackFrame>,
     filter_text: slint::SharedString,
     filter: crate::preview::ui::SelectionStackFilter,
+    sort_by_area: bool,
 ) -> slint::ModelRc<crate::preview::ui::SelectionStackFrame> {
     use crate::preview::ui::{SelectionStackFilter, SelectionStackFrame};
     use slint::ModelExt;
@@ -469,6 +470,18 @@ pub fn filter_sort_selection_stack(
         }
     }
 
+    let model = if sort_by_area {
+        Rc::new(model.sort_by(|a, b| {
+            let a_area = a.width * a.height;
+            let b_area = b.width * b.height;
+
+            a_area.partial_cmp(&b_area).unwrap_or(std::cmp::Ordering::Equal)
+        }))
+        .into()
+    } else {
+        model
+    };
+
     let filter_text = filter_text.to_string();
 
     if filter_text.is_empty() && filter == SelectionStackFilter::Everything {

tools/lsp/ui/api.slint

@@ -415,7 +415,7 @@ export global Api {
 
     // ## Element selection:
     callback selection-stack-at(x: length, y: length) -> [SelectionStackFrame];
-    pure callback filter-sort-selection-stack(model: [SelectionStackFrame], filter_text: string, filter: SelectionStackFilter) -> [SelectionStackFrame];
+    pure callback filter-sort-selection-stack(model: [SelectionStackFrame], filter_text: string, filter: SelectionStackFilter, sort-by-area: bool) -> [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/selection-popup.slint

@@ -190,7 +190,7 @@ component PopupInner inherits Rectangle {
         }
     }
 
-    private property <[SelectionStackFrame]> filtered-model: Api.filter-sort-selection-stack(root.selection-stack, filter-edit.text, filter-list.filter);
+    private property <[SelectionStackFrame]> filtered-model: Api.filter-sort-selection-stack(root.selection-stack, filter-edit.text, filter-list.filter, sort-by-area-button.checked);
     border-radius: EditorSizeSettings.radius;
 
     border-width: 0.5px;
@@ -249,6 +249,12 @@ component PopupInner inherits Rectangle {
                     }
                 }
             }
+
+            sort-by-area-button := Button {
+                checkable: true;
+                icon: Icons.list-filter;
+                colorize-icon: true;
+            }
         }
 
         Rectangle {

tools/lsp/ui/components/styling.slint

@@ -6,6 +6,7 @@ import { Palette } from "std-widgets.slint";
 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> list-filter: @image-url("../assets/list-filter.svg");
     out property <image> inspect: @image-url("../assets/inspect.svg");
     out property <image> search: @image-url("../assets/search.svg");
     out property <image> filter: @image-url("../assets/filter.svg");