From 0fd025de3e56fc63f1177f279569d341c5d20203 Mon Sep 17 00:00:00 2001
From: Robin Kutesa <kutesir@The-Prometheus.local>
Date: Thu, 21 May 2026 13:44:24 +0300
Subject: [PATCH] Replace page nav arrows with segmented indicator + square
 chevron

Three amber/gray capsule pills show the current page; a small
rounded-square button with an amber border advances to the next page.
Positioned below the status message (between heroView and the scroll
content), replacing the old left/right chevron bar at the bottom.

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

diff --git a/Features/Backup/BackupView.swift b/Features/Backup/BackupView.swift
index 6d669af..3e99af4 100644
--- a/Features/Backup/BackupView.swift
+++ b/Features/Backup/BackupView.swift
@@ -61,17 +61,16 @@ struct BackupView: View {
                 heroView
                     .animation(.spring(response: 0.4, dampingFraction: 0.85), value: ringPage)
 
+                // ─── Page indicator ────────────────────────────────────
+                pageIndicator
+                    .padding(.bottom, 8)
+
                 // ─── Scrollable stats / detail ─────────────────────────
                 ScrollView(.vertical, showsIndicators: false) {
                     belowContent
-                        .padding(.bottom, 16)
+                        .padding(.bottom, 24)
                 }
                 .refreshable { await triggerRefreshAndBackup() }
-
-                // ─── Page navigation ───────────────────────────────────
-                pageNav
-                    .padding(.horizontal, AppTheme.hPad)
-                    .padding(.bottom, 24)
             }
 
             // ─── Menu button — floats above scroll content ─────────────
@@ -679,7 +678,7 @@ struct BackupView: View {
 
                 circleStatusRow
                     .padding(.horizontal, AppTheme.hPad)
-                    .padding(.bottom, 20)
+                    .padding(.bottom, 10)
             } else {
                 // Match page 0 spacing so the ring stays at the same Y
                 Color.clear.frame(height: 60)
@@ -929,45 +928,40 @@ struct BackupView: View {
             .padding(.bottom, 8)
     }
 
-    // MARK: — Page navigation
+    // MARK: — Page indicator
 
-    private var pageNav: some View {
-        HStack {
-            Button {
-                withAnimation(.spring(response: 0.4, dampingFraction: 0.85)) {
-                    ringPage = (ringPage - 1 + ringPageCount) % ringPageCount
+    private var pageIndicator: some View {
+        VStack(spacing: 9) {
+            // Segmented bar — one pill per page, active = amber
+            HStack(spacing: 5) {
+                ForEach(0..<ringPageCount, id: \.self) { i in
+                    Capsule()
+                        .fill(i == ringPage
+                            ? Color(red: 1.0, green: 0.58, blue: 0.0)
+                            : Color(red: 0.78, green: 0.78, blue: 0.78).opacity(0.4))
+                        .frame(width: 26, height: 2)
+                        .animation(.spring(response: 0.35, dampingFraction: 0.8), value: ringPage)
                 }
-            } label: {
-                Image(systemName: "chevron.left")
-                    .font(.system(size: 10, weight: .medium))
-                    .foregroundStyle(AppTheme.inkTertiary)
-                    .frame(width: 30, height: 30)
-                    .background(AppTheme.surfaceSunken)
-                    .clipShape(Circle())
             }
 
-            Spacer()
-
-            Text(ringPageNames[ringPage])
-                .font(.system(size: 8, weight: .regular, design: .monospaced))
-                .foregroundStyle(AppTheme.inkTertiary)
-                .tracking(2)
-
-            Spacer()
-
+            // Square advance button with amber border
             Button {
                 withAnimation(.spring(response: 0.4, dampingFraction: 0.85)) {
                     ringPage = (ringPage + 1) % ringPageCount
                 }
             } label: {
-                Image(systemName: "chevron.right")
-                    .font(.system(size: 10, weight: .medium))
-                    .foregroundStyle(AppTheme.inkTertiary)
+                Image(systemName: "chevron.down")
+                    .font(.system(size: 9, weight: .medium))
+                    .foregroundStyle(AppTheme.inkSecondary)
                     .frame(width: 30, height: 30)
-                    .background(AppTheme.surfaceSunken)
-                    .clipShape(Circle())
+                    .overlay(
+                        RoundedRectangle(cornerRadius: 7, style: .continuous)
+                            .stroke(Color(red: 1.0, green: 0.58, blue: 0.0).opacity(0.55), lineWidth: 1)
+                    )
             }
+            .buttonStyle(.plain)
         }
+        .frame(maxWidth: .infinity)
     }
 
     // MARK: — Storage helpers