From 6ebc8783122bfd410144fc9bd6db2c1393a91543 Mon Sep 17 00:00:00 2001
From: Vitor Pamplona <vitor@vitorpamplona.com>
Date: Thu, 24 Oct 2024 17:34:00 -0400
Subject: [PATCH] Fixes poll's background rendering with the right percentages.

---
 .../amethyst/ui/note/PollNote.kt              | 57 +++++++++++++------
 .../amethyst/ui/note/PollNoteViewModel.kt     |  4 +-
 2 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/PollNote.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/PollNote.kt
index fd5d1651d..653872c22 100644
--- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/PollNote.kt
+++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/PollNote.kt
@@ -21,6 +21,7 @@
 package com.vitorpamplona.amethyst.ui.note
 
 import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
@@ -31,6 +32,7 @@ import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
@@ -42,7 +44,6 @@ import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
-import androidx.compose.material3.LinearProgressIndicator
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -59,7 +60,6 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.text.font.FontWeight
@@ -375,16 +375,7 @@ private fun RenderOptionAfterVote(
                 QuoteBorder,
             ),
     ) {
-        LinearProgressIndicator(
-            modifier = Modifier.matchParentSize(),
-            color = color,
-            gapSize = 0.dp,
-            strokeCap = StrokeCap.Square,
-            drawStopIndicator = {},
-            progress = {
-                poolOption.tally.value.toFloat()
-            },
-        )
+        DisplayProgress(poolOption, color, modifier = Modifier.matchParentSize())
 
         Row(
             verticalAlignment = Alignment.CenterVertically,
@@ -398,10 +389,7 @@ private fun RenderOptionAfterVote(
                             .width(45.dp)
                     },
             ) {
-                Text(
-                    text = "${(poolOption.tally.value.toFloat() * 100).roundToInt()}%",
-                    fontWeight = FontWeight.Bold,
-                )
+                TallyText(poolOption)
             }
 
             Column(
@@ -429,6 +417,43 @@ private fun RenderOptionAfterVote(
     }
 }
 
+@Composable
+fun DisplayProgress(
+    poolOption: PollOption,
+    color: Color,
+    modifier: Modifier,
+) {
+    val progress by poolOption.tally
+
+    // The LinearProgressIndicator has some weird update issues and renders inaccurate percentages.
+    Box(modifier = modifier) {
+        Box(
+            modifier =
+                Modifier
+                    .fillMaxWidth(progress)
+                    .fillMaxHeight()
+                    .background(color = color),
+        ) {
+        }
+    }
+}
+
+@Composable
+private fun TallyText(poolOption: PollOption) {
+    val state = poolOption.tally
+    val progressTxt by
+        remember {
+            derivedStateOf {
+                "${(state.value * 100).roundToInt()}%"
+            }
+        }
+
+    Text(
+        text = progressTxt,
+        fontWeight = FontWeight.Bold,
+    )
+}
+
 @Composable
 private fun RenderOptionBeforeVote(
     baseNote: Note,
diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/PollNoteViewModel.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/PollNoteViewModel.kt
index 8ec1f5999..ad05a333a 100644
--- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/PollNoteViewModel.kt
+++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/note/PollNoteViewModel.kt
@@ -46,7 +46,7 @@ data class PollOption(
     val option: Int,
     val descriptor: String,
     var zappedValue: MutableState<BigDecimal> = mutableStateOf(BigDecimal.ZERO),
-    var tally: MutableState<BigDecimal> = mutableStateOf(BigDecimal.ZERO),
+    var tally: MutableState<Float> = mutableStateOf(0f),
     var consensusThreadhold: MutableState<Boolean> = mutableStateOf(false),
     var zappedByLoggedIn: MutableState<Boolean> = mutableStateOf(false),
 )
@@ -126,7 +126,7 @@ class PollNoteViewModel : ViewModel() {
                     }
 
                 it.zappedValue.value = zappedValue
-                it.tally.value = tallyValue
+                it.tally.value = tallyValue.toFloat()
                 it.consensusThreadhold.value = consensusThreshold != null && tallyValue >= consensusThreshold!!
                 it.zappedByLoggedIn.value = account?.userProfile()?.let { it1 -> cachedIsPollOptionZappedBy(it.option, it1) } ?: false
             }