Add visual upload pause button, not working yet

TODO.md

@@ -21,7 +21,7 @@
   - Create room tabs brutal size transition
 
 - Refactoring
-  - Use `.pragma library` for utils.js
+  - Use a singleton for utils.js
   - Room header elide detection
   - Use HBox for Profile
   - Banners

src/icons/thin/upload-cancel.svg

@@ -0,0 +1,3 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="m23 20.168-8.185-8.187 8.185-8.174-2.832-2.807-8.182 8.179-8.176-8.179-2.81 2.81 8.186 8.196-8.186 8.184 2.81 2.81 8.203-8.192 8.18 8.192z"/>
+</svg>

src/icons/thin/upload-pause.svg

@@ -0,0 +1,6 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <g stroke-width=".948329">
+        <path d="m8.928091 20.993272h-4v-17.9865437h4z"/>
+        <path d="m19.035955 3.0067283h-4v17.9865437h4z"/>
+    </g>
+</svg>

src/icons/thin/upload-resume.svg

@@ -0,0 +1,3 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="m3 22v-20l18 10z"/>
+</svg>

src/qml/Base/HIcon.qml

@@ -29,5 +29,7 @@ Image {
     layer.effect: ColorOverlay {
         color: icon.colorize
         cached: icon.cache
+
+        Behavior on color { HColorAnimation {} }
     }
 }

src/qml/Base/HProgressBar.qml

@@ -24,6 +24,8 @@ ProgressBar {
             height: parent.height
             color: foregroundColor
 
+            Behavior on color { HColorAnimation {} }
+
             XAnimator on x {
                 running: bar.indeterminate
                 duration: theme.animationDuration * 8

src/qml/Chat/UploadsBar.qml

@@ -35,6 +35,11 @@ Rectangle {
             id: delegate
             width: uploadsList.width
 
+            property bool guiPaused: false
+
+            readonly property bool paused:
+                model.status === "Paused" || guiPaused
+
             Behavior on height { HNumberAnimation {} }
 
             Binding {
@@ -47,7 +52,7 @@ Rectangle {
 
             HRowLayout {
                 HButton {
-                    icon.name: "cancel"
+                    icon.name: "upload-cancel"
                     icon.color: theme.colors.negativeBackground
                     padded: false
 
@@ -166,6 +171,34 @@ Rectangle {
                     Behavior on Layout.preferredWidth { HNumberAnimation {} }
                 }
 
+                HButton {
+                    visible: Layout.preferredWidth > 0
+                    padded: false
+
+                    icon.name: delegate.paused ?
+                               "upload-resume" : "upload-pause"
+
+                    icon.color: delegate.paused ?
+                                theme.colors.positiveBackground :
+                                theme.colors.middleBackground
+
+                    toolTip.text: delegate.paused ?
+                                  qsTr("Resume") : qsTr("Pause")
+
+                    onClicked: {
+                        delegate.guiPaused = ! delegate.guiPaused
+                        // py.ev("model.task. TODO
+                    }
+
+                    Layout.preferredWidth:
+                        model.status === "Uploading" ?
+                        theme.baseElementsHeight : 0
+
+                    Layout.fillHeight: true
+
+                    Behavior on Layout.preferredWidth { HNumberAnimation {} }
+                }
+
                 TapHandler {
                     onTapped: if (model.status !== "Error")
                         statusLabel.expand = ! statusLabel.expand
@@ -179,9 +212,14 @@ Rectangle {
                 value: model.uploaded
                 to: model.total_size
 
+                // TODO: bake this in hprogressbar
                 foregroundColor:
                     model.status === "Error" ?
                     theme.controls.progressBar.errorForeground :
+
+                    delegate.paused ?
+                    theme.controls.progressBar.pausedForeground :
+
                     theme.controls.progressBar.foreground
 
                 Layout.fillWidth: true