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

@@ -159,6 +159,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

@@ -447,9 +447,22 @@ pub fn selection_stack_at(
 pub fn filter_sort_selection_stack(
     model: slint::ModelRc<crate::preview::ui::SelectionStackFrame>,
     filter: slint::SharedString,
+    sort_by_area: bool,
 ) -> slint::ModelRc<crate::preview::ui::SelectionStackFrame> {
     use slint::ModelExt;
 
+    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 = filter.to_string();
 
     if filter.is_empty() {

tools/lsp/ui/api.slint

@@ -404,7 +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 filter-sort-selection-stack(model: [SelectionStackFrame], filter: string, 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

@@ -1,7 +1,7 @@
 // Copyright © SixtyFPS GmbH <[email protected]>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
 
-import { ListView, Palette, ScrollView, LineEdit } from "std-widgets.slint";
+import { ListView, Palette, ScrollView, LineEdit, Button } from "std-widgets.slint";
 import { EditorFontSettings, EditorSizeSettings, EditorSpaceSettings, EditorPalette } from "./styling.slint";
 import { Api, SelectionStackFrame } from "../api.slint";
 import { Icons } from "styling.slint";
@@ -171,14 +171,20 @@ component PopupInner inherits Rectangle {
                     self.focus();
                 }
             }
+
+            sort-by-area-button := Button {
+                checkable: true;
+                icon: Icons.list-filter;
+                colorize-icon: true;
+            }
         }
 
         ScrollView {
             height: (root.visible-frames * root.frame-height);
 
             list-view := VerticalLayout {
 
-                for frame[index] in Api.filter-sort-selection-stack(root.selection-stack, filter-edit.text): frame-rect := Rectangle {
+                for frame[index] in Api.filter-sort-selection-stack(root.selection-stack, filter-edit.text, sort-by-area-button.checked): frame-rect := Rectangle {
                     height: root.frame-height;
 
                     function frame-color(frame: SelectionStackFrame) -> brush {

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");