[*] update normally

src/logic/examples.rs

@@ -0,0 +1,24 @@
+use crate::slint_generatedAppWindow::{AppWindow, Logic};
+use slint::{ComponentHandle, Model, ModelRc, VecModel};
+
+pub fn init(ui: &AppWindow) {
+    ui.global::<Logic>()
+        .on_generate_search_values(move |entries| {
+            let values = entries.iter().map(|entry| entry.title).collect::<Vec<_>>();
+            ModelRc::new(VecModel::from_slice(&values[..]))
+        });
+
+    ui.global::<Logic>()
+        .on_get_component_index_from_search_values(move |entries, text| {
+            let entries = entries
+                .iter()
+                .filter(|item| item.title.to_lowercase().contains(text.to_lowercase().as_str()))
+                .collect::<Vec<_>>();
+
+            if entries.is_empty() {
+                Default::default()
+            } else {
+                entries[0].clone()
+            }
+        });
+}

src/logic/mod.rs

@@ -9,6 +9,8 @@ mod toast;
 mod tr;
 mod util;
 
+mod examples;
+
 pub fn init(ui: &AppWindow) {
     util::init(ui);
     clipboard::init(ui);
@@ -17,4 +19,6 @@ pub fn init(ui: &AppWindow) {
     popup_action::init(ui);
     about::init(ui);
     setting::init(ui);
+
+    examples::init(ui);
 }

ui/base/search.slint

@@ -69,6 +69,7 @@ export component Search inherits Rectangle {
         }
 
         accepted => {
+            root.is-show-popup = false;
             root.search(self.text);
         }
 

ui/base/token-sender.slint

@@ -22,6 +22,8 @@ export component TokenSender inherits SettingDetail {
 
     in property <string> recipient-address-error-message;
     in property <string> prioritization-fee-error-message;
+    in property <string> prioritization-fee-placeholder-text;
+
     in-out property <string> memo;
     in-out property <string> prioritization-fee;
     in-out property <bool> is-show-advance-setting;
@@ -215,7 +217,7 @@ export component TokenSender inherits SettingDetail {
                 width: root.width - Theme.spacing * 4;
                 icon: Icons.cancel;
                 input-type: InputType.number;
-                placeholder-text: "micro lamports";
+                placeholder-text: root.prioritization-fee-placeholder-text;
                 text: root.prioritization-fee;
                 is-show-icon: true;
 
@@ -235,9 +237,9 @@ export component TokenSender inherits SettingDetail {
 
                 TabBtns {
                     items: [
-                        { icon: Icons.turtle, text: "Slow" },
-                        { icon: Icons.rabbit, text: "Normal" },
-                        { icon: Icons.horse, text: "Fast" }
+                        { icon: Icons.turtle, text: Logic.tr("Slow") },
+                        { icon: Icons.rabbit, text: Logic.tr("Normal") },
+                        { icon: Icons.horse, text: Logic.tr("Fast") }
                     ];
 
                     clicked(index) => {

ui/logic.slint

@@ -1,5 +1,7 @@
 import { Store,  SettingPreference, SettingProxy, TabIndex, SettingDetailIndex } from "store.slint";
 
+import { ComponentEntry } from "store.slint";
+
 export global Logic {
     callback update-cache-size();
     callback remove-all-cache();
@@ -35,4 +37,14 @@ export global Logic {
         }
         Store.current-tab-index = index;
     }
+
+    //////////////////////////////// Logic Start  ////////////////////////////////
+
+    pure callback generate-search-values([ComponentEntry]) -> [string];
+
+    // (entries, search-value) -> entry
+    pure callback get-component-index-from-search-values([ComponentEntry], string) -> ComponentEntry;
+
+    //////////////////////////////// Logic End  ////////////////////////////////
+
 }

ui/panel/desktop/examples/transaction-fee.slint

@@ -43,7 +43,7 @@ export component TransactionFeeExample inherits Flickable {
                     }
                 }
 
-                code: "";
+                code: "TransactionFee {\n    network: \"Test Net\";\n    send-token: \"BTC\";\n    send-address: \"Sender Address\";\n    recipient-address: \"Recipient Address\";\n    send-amount: \"100\";\n    send-amount-usdt: \"$1000000\";\n    fee: \"1000Sats\";\n    fee-usdt: \"$10\";\n    create-token-account-fee: \"100Sats\";\n    create-token-account-fee-usdt: \"$2\";\n    memo: \"Hello\";\n    prioritization-fee: \"100Sats\";\n    loading-status: LoadingStatus.Loading;\n\n    back => {\n    }\n\n    cancel => {\n    }\n\n    confirm => {\n    }\n}";
             }
         }
     }

ui/panel/desktop/examples/transaction-tile.slint

@@ -83,7 +83,7 @@ export component TransactionTileExample inherits Flickable {
                     }
                 }
 
-                code: "";
+                code: "VerticalLayout {\n    spacing: Theme.spacing * 2;\n\n    for entry in [\n        {\n            uuid: \"uuid-1\",\n            hash: \"hash-1\",\n            balance: \"$100.12\",\n            time: \"2024-12-04 12:06:09\",\n            status: TransactionTileStatus.Success,\n        },\n        {\n            uuid: \"uuid-2\",\n            hash: \"hash-1\",\n            balance: \"$100.12\",\n            time: \"2024-12-04 12:06:09\",\n            status: TransactionTileStatus.Pending,\n        },\n        {\n            uuid: \"uuid-3\",\n            hash: \"hash-1\",\n            hash: \"hash-1\",\n            balance: \"$100.12\",\n            time: \"2024-12-04 12:06:09\",\n            status: TransactionTileStatus.Error,\n        },\n        {\n            uuid: \"uuid-4\",\n            hash: \"hash-1\",\n            hash: \"hash-1\",\n            balance: \"$100.12\",\n            time: \"2024-12-04 12:06:09\",\n            status: TransactionTileStatus.Loading,\n        }\n    ]: Rectangle {\n        clip: true;\n        height: sc.preferred-height + Theme.padding * 2;\n\n        sc := SlideCard {\n            gap: Theme.padding * 2;\n            inner-hpadding: Theme.padding;\n\n            icons: [\n                {\n                    icon: Icons.delete,\n                    text: Logic.tr(\"Delete\"),\n                    colorize: Colors.red,\n                },\n            ];\n\n            tt := TransactionTile {\n                entry: entry;\n                hash-clicked => {\n                }\n\n                icon-clicked => {\n                }\n            }\n\n            icon-clicked => {\n            }\n        }\n    }\n}";
             }
         }
     }

ui/panel/desktop/home.slint

@@ -1,10 +1,11 @@
 import { Theme, Icons } from "../../theme.slint";
 import { Util } from "../../util.slint";
 import { Logic } from "../../logic.slint";
-import { Store, ComponentIndex } from "../../store.slint";
+import { Store } from "../../store.slint";
 import { SettingIconsBar }  from "../setting/desktop.slint";
 
-import { SettingEntryV2, CenterLayout, IconsDialogSetting } from "../../base/widgets.slint";
+import { ComponentEntry, ComponentIndex } from "../../store.slint";
+import { SettingEntryV2, CenterLayout, IconsDialogSetting, Search } from "../../base/widgets.slint";
 import { TreeExample } from "examples/tree.slint";
 import { StepExample } from "examples/step.slint";
 import { ProgressExample } from "examples/progress.slint";
@@ -69,44 +70,72 @@ component LeftPanel inherits Rectangle {
         Store.current-component-index = index;
     }
 
-    VerticalLayout {
-        alignment: LayoutAlignment.space-between;
-        Flickable {
-            width: root.width;
-            viewport-height: vbox.preferred-height;
-
-            vbox := VerticalLayout {
-                alignment: LayoutAlignment.start;
-                private property <int> current-icon-index: 0;
-
-                for entry[index] in Store.component-entries: SettingEntryV2 {
-                    text: entry.title;
-                    font-size: Theme.title3-font-size;
-                    background: Store.current-component-index == entry.component-index ? Theme.checked-background : self.has-hover ? Theme.hover-background : Colors.transparent;
-
-                    init => {
-                        self.icon = IconsDialogSetting.icons[current-icon-index];
-                        current-icon-index = Math.mod(current-icon-index + 1, IconsDialogSetting.icons.length);
-                    }
-
-                    clicked => {
-                        update-index(entry.component-index);
-                    }
+    hbox := HorizontalLayout {
+        x: 0;
+        y: 0;
+        z: 10;
+        padding: Theme.padding;
+        height: search.height;
+
+        search := Search {
+            private property <ComponentEntry> selected-component-entry;
+
+            border-radius: Theme.border-radius * 2;
+            enabled-popup: true;
+            values: Logic.generate-search-values(Store.component-entries);
+
+            search(value) => {
+                self.selected-component-entry = Logic.get-component-index-from-search-values(Store.component-entries, value);
+
+                if (self.selected-component-entry.component-index == ComponentIndex.None) {
+                    return;
                 }
+                Store.current-component-index = self.selected-component-entry.component-index;
             }
         }
+    }
 
-        HorizontalLayout {
-            alignment: LayoutAlignment.center;
-            padding: Theme.padding * 4;
+    fl := Flickable {
+        x: 0;
+        y: hbox.height + Theme.padding * 2;
+        width: root.width;
+        height: root.height - hbox.height - btns-hbox.height;
+        viewport-height: vbox.preferred-height;
+
+        vbox := VerticalLayout {
+            alignment: LayoutAlignment.start;
+            private property <int> current-icon-index: 0;
+
+            for entry[index] in Store.component-entries: SettingEntryV2 {
+                text: entry.title;
+                font-size: Theme.title3-font-size;
+                background: Store.current-component-index == entry.component-index ? Theme.checked-background : self.has-hover ? Theme.hover-background : Colors.transparent;
+
+                init => {
+                    self.icon = IconsDialogSetting.icons[current-icon-index];
+                    current-icon-index = Math.mod(current-icon-index + 1, IconsDialogSetting.icons.length);
+                }
 
-            SettingIconsBar {
-                icon-size: Theme.icon-size * 1.6;
-                h-padding: Theme.spacing * 2;
-                h-spacing: Theme.padding * 8;
+                clicked => {
+                    update-index(entry.component-index);
+                }
             }
         }
     }
+
+    btns-hbox := HorizontalLayout {
+        x: 0;
+        y: fl.y + fl.height;
+        alignment: LayoutAlignment.center;
+        padding: Theme.padding * 4;
+        height: sb.height + self.padding * 2;
+
+        sb := SettingIconsBar {
+            icon-size: Theme.icon-size * 1.33;
+            h-padding: Theme.spacing * 2;
+            h-spacing: Theme.padding * 8;
+        }
+    }
 }
 
 component RightPanel inherits Rectangle {

ui/panel/mobile/home.slint

@@ -3,7 +3,7 @@ import { Store, SettingDetailIndex } from "../../store.slint";
 import { Logic } from "../../logic.slint";
 import { Label, Head } from "../../base/widgets.slint";
 
-import { CircleProgress, ProcessStep } from "../../base/widgets.slint";
+import { CircleProgress } from "../../base/widgets.slint";
 import { Util } from "../../util.slint";
 
 component TopHead inherits Head {
@@ -25,14 +25,6 @@ component Body inherits Rectangle {
                 progress: Util.progress-value(5s);
             }
         }
-
-        HorizontalLayout {
-            alignment: center;
-
-            ProcessStep {
-                current-step: Util.progress-value-int(self.steps.length, self.steps.length * 1s);
-            }
-        }
     }
 }
 

ui/store.slint

@@ -40,6 +40,7 @@ export struct SettingProxy {
 
 //////////////////////////////// Logic Struct Start ////////////////////////////////
 export enum ComponentIndex {
+    None,
     Tree,
     Step,
     Progress,
@@ -96,6 +97,11 @@ export enum ComponentIndex {
     TransactionTile,
 }
 
+export struct ComponentEntry{
+    title: string,
+    component-index: ComponentIndex,
+}
+
 //////////////////////////////// Logic Struct End  ////////////////////////////////
 
 export global Store {
@@ -131,8 +137,8 @@ export global Store {
 
     //////////////////////////////// Logic Start ////////////////////////////////
 
-    in-out property <ComponentIndex> current-component-index: ComponentIndex.TransactionTile;
-    in-out property <[{title: string, component-index: ComponentIndex}]> component-entries: [
+    in-out property <ComponentIndex> current-component-index: ComponentIndex.Tree;
+    in-out property <[ComponentEntry]> component-entries: [
         {
             title: is-cn ? "树" : "Tree",
             component-index: ComponentIndex.Tree,