Add connection status indicator

gui/ui/app.slint

@@ -7,11 +7,11 @@ import {
     CheckBox,
     ScrollView,
     GridBox,
-    Palette,
+    Palette, Spinner, SpinBox,
 } from "std-widgets.slint";
 import { SettingsView } from "settings.slint";
-import { State, SItem } from "state.slint";
-export { State, SItem }
+import { ConnectionStatus, State, SItem } from "state.slint";
+export { ConnectionStatus, State, SItem }
 
 
 component GoodListItem inherits Rectangle {
@@ -201,7 +201,30 @@ component GoodButtons inherits ScrollView {
     }
 }
 
+component ConnStatusIndicator inherits Rectangle {
+    width: 18px;
+    Image {
+        states [
+            idle when State.connection-status == ConnectionStatus.Idle: {
+                opacity: 0%;
+            }
+            syncing when State.connection-status == ConnectionStatus.Syncing: {
+                colorize: green;
+                opacity: 75% + 25% * sin(360deg * animation-tick() / 1s);
+            }
+            error when State.connection-status == ConnectionStatus.Error: {
+                colorize: red;
+                opacity: 100%;
+            }
+        ]
+        source: @image-url("../images/arrow-down-up.svg");
+        width: 24px;
+        height: self.width;
+    }
+}
+
 component RefreshButton inherits HorizontalLayout {
+        spacing: 8px;
     alignment: center;
     Button {
         text: "Refresh";
@@ -210,6 +233,7 @@ component RefreshButton inherits HorizontalLayout {
             State.refresh-list();
         }
     }
+    ConnStatusIndicator { }
 }
 
 component AddView inherits VerticalLayout {
@@ -218,7 +242,7 @@ component AddView inherits VerticalLayout {
     padding: 8px;
     spacing: 8px;
 
-    RefreshButton { }
+    RefreshButton {}
 
     goods := GoodsListAdd {
         items <=> list;