From c4a21d8d9ce06a20b80f7181109954a20477671f Mon Sep 17 00:00:00 2001
From: Joakim Hulthe <joakim@hulthe.net>
Date: Sat, 3 Oct 2026 15:42:24 +0200
Subject: [PATCH] Add animation when an item is added to the list

---
 gui/src/lib.rs     |  2 ++
 gui/ui/app.slint   | 19 ++++++++++++++++++-
 gui/ui/state.slint |  4 ++++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/gui/src/lib.rs b/gui/src/lib.rs
index 639bf29..a199600 100644
--- a/gui/src/lib.rs
+++ b/gui/src/lib.rs
@@ -93,6 +93,7 @@ fn update_slint_list(new_list: Vec<Item>, list: &VecModel<ui::SItem>) {
             name: item.name.to_shared_string(),
             checked: item.data.checked,
             amount: item.data.amount as i32,
+            just_added: false,
         })
         .for_each(|item| list.push(item));
 }
@@ -196,6 +197,7 @@ pub fn run() -> Result<(), anyhow::Error> {
             checked: false,
             name: item.clone(),
             amount: 1,
+            just_added: true,
         });
         let conf = conf.clone();
         io.spawn(async move || {
diff --git a/gui/ui/app.slint b/gui/ui/app.slint
index d65939b..ea92c86 100644
--- a/gui/ui/app.slint
+++ b/gui/ui/app.slint
@@ -113,6 +113,23 @@ component PlusMinus inherits HorizontalLayout {
 
 component GoodListItemAdd inherits Rectangle {
     in-out property <SItem> item;
+    // Animate when this item appears.
+    transform-scale: item.just-added ? 90% : 100%;
+    opacity: item.just-added ? 0 : 100%;
+    init => {
+        self.transform-scale = 100%;
+        self.opacity = 100%;
+        item.just-added = false;
+    }
+    animate transform-scale {
+        duration: 500ms;
+        easing: ease-out-bounce;
+    }
+    animate opacity {
+        duration: 300ms;
+        easing: ease-out;
+    }
+
     background: Palette.alternate-background;
     border-radius: 8pt;
     border-width: 10pt;
@@ -169,7 +186,7 @@ component GoodsListAdd {
 
         for item in items: VerticalLayout {
             GoodListItemAdd {
-                item: item;
+                item <=> item;
             }
 
             Rectangle {
diff --git a/gui/ui/state.slint b/gui/ui/state.slint
index c35cffe..901aca9 100644
--- a/gui/ui/state.slint
+++ b/gui/ui/state.slint
@@ -2,6 +2,10 @@ export struct SItem {
     name: string,
     checked: bool,
     amount: int,
+
+    /// Whether the item was just added by the user.
+    /// Determines whether the add-animation plays.
+    just_added: bool,
 }
 
 export struct SButtonItem{