Improve StatusPollView (#1929)

* fix `StatusPollView`

* fix text alignment

Packages/StatusKit/Sources/StatusKit/Poll/StatusPollView.swift

@@ -20,26 +20,17 @@ public struct StatusPollView: View {
     self.status = status
   }
 
-  private func widthForOption(option: Poll.Option, proxy: GeometryProxy) -> CGFloat {
+  private func relativePercent(for vote: Int) -> CGFloat {
-    if viewModel.poll.safeVotersCount != 0 {
+    let biggestVote = viewModel.poll.options.compactMap { $0.votesCount }.max() ?? 0
-      let totalWidth = proxy.frame(in: .local).width
+    guard biggestVote > 0 else { return 0 }
-      return totalWidth * ratioForOption(option: option)
+
-    } else {
+    return if vote == biggestVote { 100 } else { CGFloat(vote) * 100 / CGFloat(biggestVote) }
-      return 0
-    }
   }
 
-  private func percentForOption(option: Poll.Option) -> Int {
+  private func absolutePercent(for vote: Int) -> Int {
-    let percent = ratioForOption(option: option) * 100
+    let totalVote = viewModel.poll.safeVotersCount
-    return Int(round(percent))
+    guard totalVote > 0 else { return 0 }
-  }
+    return Int(round(CGFloat(vote) * 100 / CGFloat(totalVote)))
-
-  private func ratioForOption(option: Poll.Option) -> CGFloat {
-    if let votesCount = option.votesCount, viewModel.poll.safeVotersCount != 0 {
-      CGFloat(votesCount) / CGFloat(viewModel.poll.safeVotersCount)
-    } else {
-      0.0
-    }
   }
 
   private func isSelected(option: Poll.Option) -> Bool {
@@ -84,14 +75,10 @@ public struct StatusPollView: View {
               .disabled(isInteractive == false)
           }
           if viewModel.showResults || status.account.id == currentAccount.account?.id {
-            Spacer()
             // Make sure they're all the same width using a ZStack with 100% hiding behind the
             // real percentage.
-            ZStack(alignment: .trailing) {
+            Text("100%").hidden().overlay(alignment: .trailing) {
-              Text("100%")
+              Text("\(absolutePercent(for:option.votesCount ?? 0))%")
-                .hidden()
-
-              Text("\(percentForOption(option: option))%")
                 .font(.scaledSubheadline)
             }
           }
@@ -106,13 +93,7 @@ public struct StatusPollView: View {
       if !viewModel.poll.expired, !(viewModel.poll.voted ?? false) {
         HStack {
           if !viewModel.votes.isEmpty {
-            Button("status.poll.send") {
+            Button("status.poll.send") { Task { await viewModel.postVotes() } }
-              Task {
-                do {
-                  await viewModel.postVotes()
-                }
-              }
-            }
               .buttonStyle(.borderedProminent)
           }
           Button(viewModel.showResults ? "status.poll.hide-results" : "status.poll.show-results") {
@@ -123,14 +104,13 @@ public struct StatusPollView: View {
           .buttonStyle(.bordered)
         }
       }
+
       footerView
 
     }.onAppear {
       viewModel.instance = currentInstance.instance
       viewModel.client = client
-      Task {
+      Task { await viewModel.fetchPoll() }
-        await viewModel.fetchPoll()
-      }
     }
     .accessibilityElement(children: .contain)
     .accessibilityLabel(viewModel.poll.expired ? "accessibility.status.poll.finished.label" : "accessibility.status.poll.active.label")
@@ -141,7 +121,7 @@ public struct StatusPollView: View {
     return Text("accessibility.status.poll.option-prefix-\(index + 1)-of-\(viewModel.poll.options.count)") +
     Text(", ") +
     Text(option.title) +
-      Text(showPercentage ? ", \(percentForOption(option: option))%" : "")
+    Text(showPercentage ? ", \(absolutePercent(for:option.votesCount ?? 0))%" : "")
   }
 
   private var footerView: some View {
@@ -176,40 +156,51 @@ public struct StatusPollView: View {
         }
       }
     } label: {
-      GeometryReader { proxy in
+      buttonImage
-        ZStack(alignment: .leading) {
-          Rectangle()
-            .background {
-              if viewModel.showResults || status.account.id == currentAccount.account?.id {
-                HStack {
-                  let width = widthForOption(option: option, proxy: proxy)
-                  Rectangle()
-                    .foregroundColor(theme.tintColor)
-                    .frame(width: width)
-                  if width != proxy.size.width {
       Spacer()
-                  }
-                }
-                .transition(.asymmetric(insertion: .push(from: .leading),
-                                        removal: .push(from: .trailing)))
-              }
-            }
-            .foregroundColor(theme.tintColor.opacity(0.40))
-            .clipShape(RoundedRectangle(cornerRadius: 8))
 
       HStack {
-            buttonImage
         Text(option.title)
+          .multilineTextAlignment(.leading)
           .foregroundColor(theme.labelColor)
           .font(.scaledBody)
           .lineLimit(3)
           .minimumScaleFactor(0.7)
+        Spacer()
       }
-          .padding(.leading, 12)
+      .padding(EdgeInsets(top: 5, leading: 10, bottom: 5, trailing: 10))
+      .background(alignment: .leading) {
+        if viewModel.showResults || status.account.id == currentAccount.account?.id {
+          _PercentWidthLayout(percent: relativePercent(for: option.votesCount ?? 0)) {
+            RoundedRectangle(cornerRadius: 10).foregroundColor(theme.tintColor)
+              .transition(.asymmetric(insertion: .push(from: .leading),
+                                      removal: .push(from: .trailing)))
           }
         }
       }
+      .background { RoundedRectangle(cornerRadius: 10).fill(theme.tintColor.opacity(0.4)) }
+      .clipShape(RoundedRectangle(cornerRadius: 10))
+    }
     .buttonStyle(.borderless)
     .frame(minHeight: .pollBarHeight)
   }
+
+  private struct _PercentWidthLayout: Layout {
+    let percent: CGFloat
+
+    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
+      guard let view = subviews.first else { return CGSize.zero }
+      return view.sizeThatFits(proposal)
+    }
+
+    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
+      guard let view = subviews.first,
+            let width = proposal.width
+      else { return }
+
+      view.place(
+        at: bounds.origin,
+        proposal: ProposedViewSize(width: percent / 100 * width, height: proposal.height))
+    }
+  }
 }