redesign iOS round into fullscreen swipe flow

2026-04-10 10:23:15 +02:00
parent 2553845100
commit 7b466f0a34
12 changed files with 685 additions and 254 deletions
@@ -9,11 +9,13 @@ struct RoundView: View {
    let onRetry: () -> Void

    @State private var phase: Phase = .preview
-    @State private var selectedOutcomeID: String? = nil
+    @State private var selectedOutcomeID: String?
    @State private var lockAt: Date = .now
    @State private var transitionTask: Task<Void, Never>?
    @State private var actionMessage: String?
    @State private var isSubmitting = false
+    @State private var swipeFeedback: SwipeFeedback?
+    @State private var dragOffset: CGSize = .zero

    private enum Phase {
        case preview
@@ -22,93 +24,62 @@ struct RoundView: View {
        case result
    }

+    private enum SwipeDirection {
+        case left
+        case right
+    }
+
+    private struct SwipeFeedback: Equatable {
+        let direction: SwipeDirection
+        let title: String
+    }
+
    var body: some View {
        TimelineView(.periodic(from: Date(), by: 1)) { _ in
            let round = repository.currentRound
            let now = repository.serverNow()
-            let hasRound = round != nil
            let remaining = max(lockAt.timeIntervalSince(now), 0)
            let timerLocked = round != nil && remaining <= 0
-            let countdownText = Self.countdownText(for: remaining)
            let bannerMessage = actionMessage ?? hermesUserFacingErrorMessage(
                localization: localization,
                localeCode: localization.localeCode,
                error: repository.errorCause
            )

-            VStack(alignment: .leading, spacing: HermesTheme.sectionSpacing) {
-                HermesSectionHeader(
-                    title: localization.string(for: "round.title"),
-                    subtitle: localization.string(for: "round.subtitle")
+            ZStack {
+                HermesTheme.surface
+                    .ignoresSafeArea()
+
+                if round != nil {
+                    HermesVideoPlayerView(coordinator: playerCoordinator, cornerRadius: 0, fixedHeight: nil)
+                        .ignoresSafeArea()
+                }
+
+                LinearGradient(
+                    colors: [.black.opacity(0.72), .black.opacity(0.12), .black.opacity(0.78)],
+                    startPoint: .top,
+                    endPoint: .bottom
                )
+                .ignoresSafeArea()

-                if !hasRound {
+                if let feedback = swipeFeedback {
+                    swipeFeedbackOverlay(feedback)
+                }
+
+                VStack(spacing: 0) {
+                    header(round: round, remaining: remaining)
+                    Spacer()
                    if let bannerMessage {
-                        roundErrorState(
-                            message: bannerMessage,
-                            retryText: localization.string(for: "common.retry"),
-                            onRetry: onRetry
-                        )
-                    } else {
-                        roundLoadingState(
-                            title: localization.string(for: "common.loading"),
-                            subtitle: localization.string(for: "round.subtitle")
-                        )
-                    }
-                } else {
-                    if let bannerMessage {
-                        roundBanner(message: bannerMessage)
-                    }
-
-                    videoSection(
-                        round: round,
-                        countdownText: countdownText,
-                        remaining: remaining,
-                        isTimerLocked: timerLocked
-                    )
-
-                    if let round {
-                        switch phase {
-                        case .preview, .locked:
-                            SelectionView(
-                                statusText: phase == .preview && !timerLocked ? localization.string(for: "round.selection_prompt") : localization.string(for: "round.locked_label"),
-                                options: selectionOptions(for: round),
-                                selectedOptionID: selectedOutcomeID,
-                                isLocked: phase != .preview || timerLocked || isSubmitting,
-                                confirmTitle: localization.string(for: "round.primary_cta"),
-                                onSelect: handleSelection,
-                                onConfirm: confirmSelection
-                            )
-
-                        case .reveal:
-                            RevealView(
-                                title: localization.string(for: "reveal.title"),
-                                subtitle: localization.string(for: "reveal.subtitle"),
-                                statusText: localization.string(for: "reveal.status"),
-                                selectionLabel: localization.string(for: "result.selection_label"),
-                                selectionValue: selectedOutcomeTitle(for: round),
-                                continueTitle: localization.string(for: "reveal.cta"),
-                                onContinue: showResult
-                            )
-
-                        case .result:
-                            ResultView(
-                                title: localization.string(for: "result.title"),
-                                subtitle: localization.string(for: "result.subtitle"),
-                                selectionLabel: localization.string(for: "result.selection_label"),
-                                selectionValue: selectedOutcomeTitle(for: round),
-                                outcomeLabel: localization.string(for: "result.outcome_label"),
-                                outcomeValue: winningOutcomeTitle(for: round),
-                                didWin: selectedOutcomeID == round.settlement.winningOutcomeId.uuidString,
-                                winLabel: localization.string(for: "result.win"),
-                                loseLabel: localization.string(for: "result.lose"),
-                                nextRoundTitle: localization.string(for: "result.next_round"),
-                                onNextRound: nextRound
-                            )
-                        }
+                        banner(message: bannerMessage)
+                            .padding(.horizontal, HermesTheme.screenPadding)
+                            .padding(.bottom, 16)
                    }
+                    bottomOverlay(round: round, timerLocked: timerLocked)
                }
            }
+            .offset(x: dragOffset.width * 0.12)
+            .contentShape(Rectangle())
+            .gesture(swipeGesture(round: round, timerLocked: timerLocked))
            .onAppear {
                if let round {
                    startPreview(round)
@@ -118,68 +89,222 @@ struct RoundView: View {
                guard newValue != nil, let round else {
                    return
                }
-
                startPreview(round)
            }
+            .onChange(of: timerLocked) { _, isLocked in
+                guard isLocked, phase == .preview, selectedOutcomeID == nil else {
+                    return
+                }
+                phase = .locked
+                playerCoordinator.pause()
+            }
        }
-        .hermesCard(elevated: true)
        .onDisappear {
            transitionTask?.cancel()
            playerCoordinator.pause()
        }
    }

-    @ViewBuilder
-    private func videoSection(round: HermesRound?, countdownText: String, remaining: TimeInterval, isTimerLocked: Bool) -> some View {
-        ZStack(alignment: .topTrailing) {
-            RoundedRectangle(cornerRadius: HermesTheme.cornerRadius, style: .continuous)
-                .fill(HermesTheme.surfaceElevated)
-                .frame(height: 220)
-
-            if let round {
-                HermesVideoPlayerView(coordinator: playerCoordinator)
-            } else {
-                Text(localization.string(for: "round.video_placeholder"))
-                    .font(.headline.weight(.semibold))
+    private func header(round: HermesRound?, remaining: TimeInterval) -> some View {
+        HStack(alignment: .top, spacing: 16) {
+            VStack(alignment: .leading, spacing: 10) {
+                Text(promptTitle(for: round))
+                    .font(.system(size: 30, weight: .bold, design: .rounded))
+                    .foregroundStyle(HermesTheme.textPrimary)
+                Text(phaseSubtitle(for: round))
+                    .font(.callout.weight(.medium))
                    .foregroundStyle(HermesTheme.textSecondary)
            }

-            if let round {
-                VStack(alignment: .trailing, spacing: 10) {
-                    HermesCountdownBadge(
-                        label: localization.string(for: "round.countdown_label"),
-                        value: countdownText,
-                        warning: !isTimerLocked && remaining <= 10
-                    )
+            Spacer(minLength: 12)

-                    HermesMetricPill(
-                        label: localization.string(for: "round.odds_label"),
-                        value: formatOdds(round)
-                    )
-                    .frame(maxWidth: 160)
-                }
-                .padding(12)
-            }
-
-            Text(phaseLabel(isTimerLocked: isTimerLocked))
-                .font(.caption.weight(.bold))
-                .foregroundStyle(HermesTheme.textPrimary)
-                .padding(.horizontal, 12)
-                .padding(.vertical, 8)
-                .background(.black.opacity(0.35))
-                .clipShape(Capsule())
-                .padding(12)
-                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomLeading)
+            SemiCircleCountdownView(progress: progressValue(for: remaining), label: Self.countdownText(for: remaining))
        }
+        .padding(.horizontal, HermesTheme.screenPadding)
+        .padding(.top, 112)
+    }
+
+    @ViewBuilder
+    private func bottomOverlay(round: HermesRound?, timerLocked: Bool) -> some View {
+        VStack(spacing: 16) {
+            if let round {
+                switch phase {
+                case .preview:
+                    swipeHintRow(round: round)
+                case .locked:
+                    lockedOverlay(timerLocked: timerLocked)
+                case .reveal:
+                    revealOverlay(round: round)
+                case .result:
+                    resultOverlay(round: round)
+                }
+            } else if let banner = actionMessage ?? hermesUserFacingErrorMessage(localization: localization, localeCode: localization.localeCode, error: repository.errorCause) {
+                VStack(spacing: 12) {
+                    Text(banner)
+                        .font(.headline.weight(.semibold))
+                        .foregroundStyle(HermesTheme.textPrimary)
+                    Button(localization.string(for: "common.retry"), action: onRetry)
+                        .buttonStyle(HermesPrimaryButtonStyle())
+                }
+                .padding(HermesTheme.contentPadding)
+                .hermesCard(elevated: true)
+            }
+        }
+        .padding(.horizontal, HermesTheme.screenPadding)
+        .padding(.bottom, 28)
+    }
+
+    private func swipeHintRow(round: HermesRound) -> some View {
+        let leftOutcome = sortedOutcomes(for: round).dropFirst().first
+        let rightOutcome = sortedOutcomes(for: round).first
+
+        return HStack(spacing: 12) {
+            swipeEdgeLabel(title: leftOutcome.map(outcomeTitle) ?? localization.string(for: "round.no"), alignment: .leading, color: .red)
+            swipeEdgeLabel(title: rightOutcome.map(outcomeTitle) ?? localization.string(for: "round.yes"), alignment: .trailing, color: HermesTheme.positive)
+        }
+    }
+
+    private func swipeEdgeLabel(title: String, alignment: HorizontalAlignment, color: Color) -> some View {
+        VStack(alignment: alignment, spacing: 6) {
+            Text(title)
+                .font(.title3.weight(.bold))
+                .foregroundStyle(.white)
+            Text(alignment == .leading ? localization.string(for: "round.swipe_left" ) : localization.string(for: "round.swipe_right"))
+                .font(.caption.weight(.semibold))
+                .foregroundStyle(.white.opacity(0.72))
+        }
+        .frame(maxWidth: .infinity, alignment: alignment == .leading ? .leading : .trailing)
+        .padding(.horizontal, 18)
+        .padding(.vertical, 14)
+        .background(color.opacity(0.18))
+        .clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous))
+    }
+
+    private func lockedOverlay(timerLocked: Bool) -> some View {
+        VStack(alignment: .leading, spacing: 10) {
+            Text(localization.string(for: timerLocked ? "round.freeze_title" : "round.locked_label"))
+                .font(.title3.weight(.bold))
+                .foregroundStyle(HermesTheme.textPrimary)
+            Text(localization.string(for: timerLocked ? "round.freeze_subtitle" : "round.reveal_loading"))
+                .font(.callout)
+                .foregroundStyle(HermesTheme.textSecondary)
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .padding(HermesTheme.contentPadding)
+        .background(.black.opacity(0.34))
        .clipShape(RoundedRectangle(cornerRadius: HermesTheme.cornerRadius, style: .continuous))
    }

+    private func revealOverlay(round: HermesRound) -> some View {
+        VStack(alignment: .leading, spacing: 12) {
+            Text(localization.string(for: "reveal.title"))
+                .font(.title3.weight(.bold))
+                .foregroundStyle(HermesTheme.textPrimary)
+            Text(localization.string(for: "reveal.subtitle"))
+                .font(.callout)
+                .foregroundStyle(HermesTheme.textSecondary)
+            Button(localization.string(for: "reveal.cta"), action: showResult)
+                .buttonStyle(HermesPrimaryButtonStyle())
+        }
+        .padding(HermesTheme.contentPadding)
+        .background(.black.opacity(0.34))
+        .clipShape(RoundedRectangle(cornerRadius: HermesTheme.cornerRadius, style: .continuous))
+    }
+
+    private func resultOverlay(round: HermesRound) -> some View {
+        VStack(alignment: .leading, spacing: 12) {
+            Text(selectedOutcomeID == round.settlement.winningOutcomeId.uuidString ? localization.string(for: "result.win") : localization.string(for: "result.lose"))
+                .font(.title3.weight(.bold))
+                .foregroundStyle(HermesTheme.textPrimary)
+            Text(localization.string(for: "result.selection_label") + ": " + selectedOutcomeTitle(for: round))
+                .font(.callout)
+                .foregroundStyle(HermesTheme.textSecondary)
+            Text(localization.string(for: "result.outcome_label") + ": " + winningOutcomeTitle(for: round))
+                .font(.callout)
+                .foregroundStyle(HermesTheme.textSecondary)
+            Button(localization.string(for: "result.next_round"), action: nextRound)
+                .buttonStyle(HermesPrimaryButtonStyle())
+        }
+        .padding(HermesTheme.contentPadding)
+        .background(.black.opacity(0.34))
+        .clipShape(RoundedRectangle(cornerRadius: HermesTheme.cornerRadius, style: .continuous))
+    }
+
+    private func banner(message: String) -> some View {
+        Text(message)
+            .font(.callout.weight(.semibold))
+            .foregroundStyle(HermesTheme.textPrimary)
+            .padding(.horizontal, 14)
+            .padding(.vertical, 12)
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .background(HermesTheme.warning.opacity(0.24))
+            .clipShape(RoundedRectangle(cornerRadius: 18, style: .continuous))
+    }
+
+    private func swipeFeedbackOverlay(_ feedback: SwipeFeedback) -> some View {
+        let color = feedback.direction == .right ? HermesTheme.positive : .red
+
+        return VStack {
+            Spacer()
+            Text(feedback.title)
+                .font(.system(size: 38, weight: .black, design: .rounded))
+                .foregroundStyle(.white)
+                .padding(.horizontal, 24)
+                .padding(.vertical, 18)
+                .background(color.opacity(0.88))
+                .clipShape(Capsule())
+            Spacer()
+        }
+        .frame(maxWidth: .infinity)
+    }
+
+    private func swipeGesture(round: HermesRound?, timerLocked: Bool) -> some Gesture {
+        DragGesture(minimumDistance: 24)
+            .onChanged { value in
+                dragOffset = value.translation
+            }
+            .onEnded { value in
+                defer { dragOffset = .zero }
+                guard let round, phase == .preview, !timerLocked, !isSubmitting else {
+                    swipeFeedback = nil
+                    return
+                }
+
+                guard abs(value.translation.width) > 72, abs(value.translation.width) > abs(value.translation.height) else {
+                    swipeFeedback = nil
+                    return
+                }
+
+                handleSwipe(value.translation.width > 0 ? .right : .left, round: round)
+            }
+    }
+
+    private func handleSwipe(_ direction: SwipeDirection, round: HermesRound) {
+        let outcomes = sortedOutcomes(for: round)
+        let outcome = direction == .right ? outcomes.first : outcomes.dropFirst().first
+        guard let outcome else {
+            return
+        }
+
+        swipeFeedback = SwipeFeedback(direction: direction, title: outcomeTitle(outcome))
+        handleSelection(outcome.id.uuidString)
+        confirmSelection()
+
+        Task { @MainActor in
+            try? await Task.sleep(nanoseconds: 700_000_000)
+            if swipeFeedback?.title == outcomeTitle(outcome) {
+                swipeFeedback = nil
+            }
+        }
+    }
+
    private func startPreview(_ round: HermesRound) {
        transitionTask?.cancel()
        phase = .preview
        selectedOutcomeID = nil
        actionMessage = nil
        isSubmitting = false
+        swipeFeedback = nil
        lockAt = round.event.lockAt
        playerCoordinator.prepareForPreview(url: round.media.hlsMasterUrl, startTimeMs: round.media.previewStartMs)

@@ -188,14 +313,14 @@ struct RoundView: View {
        analytics.track("screen_viewed", attributes: ["screen_name": "round"])
    }

-    private func handleSelection(_ option: SelectionOption) {
+    private func handleSelection(_ outcomeID: String) {
        guard phase == .preview, !isSubmitting else {
            return
        }

-        selectedOutcomeID = option.id
-        analytics.track("outcome_focused", attributes: ["screen_name": "round", "outcome_id": option.id])
-        analytics.track("outcome_selected", attributes: ["screen_name": "round", "outcome_id": option.id])
+        selectedOutcomeID = outcomeID
+        analytics.track("outcome_focused", attributes: ["screen_name": "round", "outcome_id": outcomeID])
+        analytics.track("outcome_selected", attributes: ["screen_name": "round", "outcome_id": outcomeID])
    }

    private func confirmSelection() {
@@ -208,12 +333,14 @@ struct RoundView: View {
            return
        }

-        guard let outcomeID = UUID(uuidString: selectedOutcomeID) ?? round.market.outcomes.first?.id else {
+        guard let outcomeID = UUID(uuidString: selectedOutcomeID) ?? sortedOutcomes(for: round).first?.id else {
            actionMessage = localization.string(for: "errors.generic")
            return
        }

        if repository.serverNow() >= round.event.lockAt {
+            phase = .locked
+            playerCoordinator.pause()
            return
        }

@@ -242,19 +369,20 @@ struct RoundView: View {

                analytics.track("selection_submitted", attributes: baseSelectionAttributes(selectedOutcomeID))
                analytics.track("selection_accepted", attributes: baseSelectionAttributes(selectedOutcomeID))
-                analytics.track("market_locked", attributes: baseSelectionAttributes(selectedOutcomeID).merging(["lock_reason": "manual_selection"]) { _, new in new })
+                analytics.track("market_locked", attributes: baseSelectionAttributes(selectedOutcomeID).merging(["lock_reason": "swipe_selection"]) { _, new in new })

                phase = .locked
-                playerCoordinator.pause()
+                playerCoordinator.play(rate: 2.0)

                transitionTask?.cancel()
                transitionTask = Task { @MainActor in
-                    try? await Task.sleep(nanoseconds: 750_000_000)
-                    guard !Task.isCancelled, phase == .locked else {
+                    try? await Task.sleep(nanoseconds: 1_100_000_000)
+                    guard !Task.isCancelled else {
                        return
                    }

                    phase = .reveal
+                    playerCoordinator.play(url: round.media.hlsMasterUrl, startTimeMs: round.media.revealStartMs, rate: 1.0)
                    analytics.track("reveal_started", attributes: roundAnalyticsAttributes(round).merging(baseSelectionAttributes(selectedOutcomeID)) { _, new in new })
                }
            } catch {
@@ -273,12 +401,7 @@ struct RoundView: View {

        analytics.track("reveal_completed", attributes: roundAnalyticsAttributes(round).merging(baseSelectionAttributes(selectedOutcomeID)) { _, new in new })
        phase = .result
-        analytics.track(
-            "result_viewed",
-            attributes: roundAnalyticsAttributes(round)
-                .merging(baseSelectionAttributes(selectedOutcomeID)) { _, new in new }
-                .merging(["outcome": winningOutcomeTitle(for: round)]) { _, new in new }
-        )
+        playerCoordinator.pause()
    }

    private func nextRound() {
@@ -288,62 +411,45 @@ struct RoundView: View {

        Task { @MainActor in
            do {
-                _ = try await repository.refreshRoundFromNetwork()
+                if repository.currentSession?.deviceModel == "Demo Device" {
+                    _ = try await repository.refreshMockRound()
+                } else {
+                    _ = try await repository.refreshRoundFromNetwork()
+                }
            } catch {
                actionMessage = hermesUserFacingErrorMessage(localization: localization, localeCode: localization.localeCode, error: error) ?? localization.string(for: "errors.generic")
            }
        }
    }

-    private func roundLoadingState(title: String, subtitle: String) -> some View {
-        VStack(alignment: .leading, spacing: 8) {
-            Text(title)
-                .font(.headline.weight(.semibold))
-                .foregroundStyle(HermesTheme.textPrimary)
-            Text(subtitle)
-                .font(.callout)
-                .foregroundStyle(HermesTheme.textSecondary)
+    private func sortedOutcomes(for round: HermesRound) -> [HermesOutcome] {
+        round.market.outcomes.sorted(by: { $0.sortOrder < $1.sortOrder })
+    }
+
+    private func promptTitle(for round: HermesRound?) -> String {
+        guard let round else {
+            return localization.string(for: "common.loading")
        }
-    }

-    private func roundErrorState(message: String, retryText: String, onRetry: @escaping () -> Void) -> some View {
-        VStack(alignment: .leading, spacing: 12) {
-            Text(message)
-                .font(.callout)
-                .foregroundStyle(HermesTheme.warning)
-
-            Button {
-                onRetry()
-            } label: {
-                Text(retryText)
-            }
-            .buttonStyle(HermesSecondaryButtonStyle())
+        let localizedQuestion = localization.string(for: round.market.questionKey)
+        if localizedQuestion != round.market.questionKey {
+            return localizedQuestion
        }
+
+        return localization.localeCode == "sv" ? round.event.titleSv : round.event.titleEn
    }

-    private func roundBanner(message: String) -> some View {
-        Text(message)
-            .font(.callout)
-            .foregroundStyle(HermesTheme.warning)
-            .padding(.horizontal, 12)
-            .padding(.vertical, 10)
-            .frame(maxWidth: .infinity, alignment: .leading)
-            .background(HermesTheme.warning.opacity(0.12))
-            .clipShape(RoundedRectangle(cornerRadius: HermesTheme.insetRadius, style: .continuous))
-    }
-
-    private func selectionOptions(for round: HermesRound) -> [SelectionOption] {
-        let oddsByOutcomeId = Dictionary(uniqueKeysWithValues: round.oddsVersion.odds.map { ($0.outcomeId, $0) })
-        return round.market.outcomes
-            .sorted(by: { $0.sortOrder < $1.sortOrder })
-            .map { outcome in
-                SelectionOption(
-                    id: outcome.id.uuidString,
-                    title: outcomeTitle(outcome),
-                    subtitle: localization.string(for: "round.selection_prompt"),
-                    odds: oddsByOutcomeId[outcome.id].map { String(format: "%.2f", $0.decimalOdds) } ?? "--"
-                )
-            }
+    private func phaseSubtitle(for round: HermesRound?) -> String {
+        switch phase {
+        case .preview:
+            return localization.string(for: "round.selection_prompt")
+        case .locked:
+            return localization.string(for: "round.reveal_loading")
+        case .reveal:
+            return localization.string(for: "reveal.subtitle")
+        case .result:
+            return round.map { winningOutcomeTitle(for: $0) } ?? localization.string(for: "common.loading")
+        }
    }

    private func outcomeTitle(_ outcome: HermesOutcome) -> String {
@@ -352,6 +458,10 @@ struct RoundView: View {
            return localization.string(for: "round.home")
        case "round.away":
            return localization.string(for: "round.away")
+        case "round.yes":
+            return localization.string(for: "round.yes")
+        case "round.no":
+            return localization.string(for: "round.no")
        default:
            return outcome.outcomeCode.capitalized
        }
@@ -374,29 +484,8 @@ struct RoundView: View {
        return outcomeTitle(outcome)
    }

-    private func formatOdds(_ round: HermesRound) -> String {
-        let oddsByOutcomeId = Dictionary(uniqueKeysWithValues: round.oddsVersion.odds.map { ($0.outcomeId, $0) })
-        return round.market.outcomes
-            .sorted(by: { $0.sortOrder < $1.sortOrder })
-            .compactMap { oddsByOutcomeId[$0.id]?.decimalOdds }
-            .map { String(format: "%.2f", $0) }
-            .joined(separator: " / ")
-    }
-
-    private func phaseLabel(isTimerLocked: Bool) -> String {
-        switch phase {
-        case .preview:
-            if isTimerLocked {
-                return localization.string(for: "round.locked_label")
-            }
-            return localization.string(for: "round.preview_label")
-        case .locked:
-            return localization.string(for: "round.locked_label")
-        case .reveal:
-            return localization.string(for: "reveal.title")
-        case .result:
-            return localization.string(for: "result.title")
-        }
+    private func progressValue(for remaining: TimeInterval) -> Double {
+        min(max(remaining / 15.0, 0), 1)
    }

    private static func countdownText(for remaining: TimeInterval) -> String {
@@ -418,3 +507,37 @@ struct RoundView: View {
        ]
    }
 }
+
+private struct SemiCircleCountdownView: View {
+    let progress: Double
+    let label: String
+
+    var body: some View {
+        ZStack {
+            SemiCircleShape()
+                .stroke(.white.opacity(0.18), style: StrokeStyle(lineWidth: 10, lineCap: .round))
+            SemiCircleShape()
+                .trim(from: 0, to: progress)
+                .stroke(HermesTheme.accent, style: StrokeStyle(lineWidth: 10, lineCap: .round))
+            Text(label)
+                .font(.caption.weight(.bold))
+                .foregroundStyle(.white)
+                .padding(.top, 22)
+        }
+        .frame(width: 92, height: 56)
+    }
+}
+
+private struct SemiCircleShape: Shape {
+    func path(in rect: CGRect) -> Path {
+        var path = Path()
+        path.addArc(
+            center: CGPoint(x: rect.midX, y: rect.maxY),
+            radius: rect.width / 2,
+            startAngle: .degrees(180),
+            endAngle: .degrees(0),
+            clockwise: false
+        )
+        return path
+    }
+}