Add animation when an item is added to the list

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 {

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{