From c96f28cd06ac7a4df74527c5f5165b8ce7a7edc6 Mon Sep 17 00:00:00 2001
From: Robin Kutesa <kutesir@The-Prometheus.local>
Date: Wed, 20 May 2026 19:39:51 +0300
Subject: [PATCH] Fix stats labels/colors and ring center content to match HTML
 prototype
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Stats: NAS / IPHONE / PENDING (amber) / SAFE — shorter labels, correct colors
- Running state: ring center counts down remaining files with "BACKING UP" label
- Safe state: ring center shows total photo count in green + checkmark
- Remove unused percentText computed property

Co-Authored-By: Kutesir <kutesir@provoc.ug>
Co-Authored-By: Sentry <sentry@provoc.ug>
---
 Features/Backup/BackupView.swift | 36 ++++++++++++++------------------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/Features/Backup/BackupView.swift b/Features/Backup/BackupView.swift
index cbb4cc9..888d569 100644
--- a/Features/Backup/BackupView.swift
+++ b/Features/Backup/BackupView.swift
@@ -186,8 +186,13 @@ struct BackupView: View {
     private var ringMainView: some View {
         switch widgetState {
         case .safe:
-            VStack(spacing: 8) {
+            VStack(spacing: 6) {
                 ringCheckmark
+                Text("\(statusService.snapshot.phoneTotal)")
+                    .font(.system(size: 46, weight: .ultraLight))
+                    .foregroundStyle(AppTheme.positive)
+                    .contentTransition(.numericText())
+                    .kerning(-2)
                 Text("PHOTOS SAFE")
                     .font(.system(size: 8, weight: .regular, design: .monospaced))
                     .foregroundStyle(AppTheme.positive.opacity(0.75))
@@ -206,23 +211,16 @@ struct BackupView: View {
             }
 
         case .running:
-            VStack(spacing: 5) {
-                Text(percentText)
+            VStack(spacing: 6) {
+                Text("\(notBackedUpDisplayCount)")
                     .font(.system(size: 46, weight: .ultraLight))
                     .foregroundStyle(AppTheme.ink)
                     .contentTransition(.numericText())
                     .kerning(-2)
-                Text("\(engine.job.uploadedFiles + engine.job.skippedFiles) OF \(engine.job.totalFiles)")
+                Text("BACKING UP")
                     .font(.system(size: 8, weight: .regular, design: .monospaced))
-                    .foregroundStyle(AppTheme.inkSecondary)
-                    .tracking(1.5).opacity(0.75)
-                if let eta = engine.job.eta {
-                    Text("~\(etaString(eta)) remaining")
-                        .font(.system(size: 8, weight: .regular, design: .monospaced))
-                        .foregroundStyle(AppTheme.inkTertiary)
-                        .tracking(1.5).opacity(0.6)
-                        .padding(.top, 1)
-                }
+                    .foregroundStyle(AppTheme.inkTertiary)
+                    .tracking(2).opacity(0.75)
             }
 
         default: // offline, pending, paused
@@ -265,8 +263,6 @@ struct BackupView: View {
         }
     }
 
-    private var percentText: String { "\(Int(engine.job.progress * 100))%" }
-
     // MARK: — Compact stats strip
 
     // Invariant: alreadySafe + needBackup == phoneTotal always.
@@ -310,25 +306,25 @@ struct BackupView: View {
         HStack(spacing: 0) {
             compactStat(
                 "\(nasArchiveDisplayCount)",
-                label: "NAS Archive",
+                label: "NAS",
                 color: AppTheme.interactive
             )
             thinDivider
             compactStat(
                 "\(statusService.snapshot.phoneTotal)",
-                label: "On iPhone",
+                label: "IPHONE",
                 color: AppTheme.inkSecondary
             )
             thinDivider
             compactStat(
                 "\(notBackedUpDisplayCount)",
-                label: "Need Backup",
-                color: AppTheme.inkSecondary
+                label: "PENDING",
+                color: Color(red: 1.0, green: 0.62, blue: 0.0)
             )
             thinDivider
             compactStat(
                 "\(alreadySafeDisplayCount)",
-                label: "Already Safe",
+                label: "SAFE",
                 color: AppTheme.positive
             )
         }