From 2bdf41502ef62d009c6f28c4b6fb01e7a491be06 Mon Sep 17 00:00:00 2001
From: Robin Kutesa <kutesir@The-Prometheus.local>
Date: Sat, 16 May 2026 19:19:37 +0300
Subject: [PATCH] fix: pin Connect button to bottom, dynamic protocol badge

- safeAreaInset pins Connect/Continue button to screen bottom,
  eliminating dead space below the form
- UGreenCompatibilityBadge now takes selectedProtocol param:
  green dot + green SMB label when SMB selected,
  grey dot + grey SFTP label when SFTP selected

Co-Authored-By: Kutesir <kutesir@provoc.ug>
Co-Authored-By: Sentry <sentry@provoc.ug>
---
 Features/Connect/ConnectView.swift            | 14 ++++--
 .../Components/UGreenCompatibilityBadge.swift | 46 ++++++++-----------
 2 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/Features/Connect/ConnectView.swift b/Features/Connect/ConnectView.swift
index c4420b8..6735139 100644
--- a/Features/Connect/ConnectView.swift
+++ b/Features/Connect/ConnectView.swift
@@ -35,8 +35,8 @@ struct ConnectView: View {
                             }
                             .shadow(color: AppTheme.ink.opacity(0.18), radius: 12, x: 0, y: 4)
 
-                            // UGreen NAS compatibility badge
-                            UGreenCompatibilityBadge()
+                            // UGreen NAS compatibility badge — reacts to selected protocol
+                            UGreenCompatibilityBadge(selectedProtocol: vm.selectedProtocol)
                         }
                         .padding(.bottom, 24)
                         .padding(.horizontal, AppTheme.hPad)
@@ -236,7 +236,10 @@ struct ConnectView: View {
                         .animation(.spring(response: 0.3, dampingFraction: 0.8), value: vm.isConnected)
                         .padding(.bottom, 16)
 
-                        // Connect / Continue button
+                    }
+                }
+                .safeAreaInset(edge: .bottom) {
+                    VStack(spacing: 0) {
                         Button(action: {
                             if vm.isConnected { navigateToDashboard = true }
                             else { Task { await vm.verify() } }
@@ -253,11 +256,12 @@ struct ConnectView: View {
                             color: vm.isConnected ? AppTheme.positive : AppTheme.ink
                         ))
                         .padding(.horizontal, AppTheme.hPad)
+                        .padding(.top, 12)
+                        .padding(.bottom, 32)
                         .disabled(!vm.canConnect)
                         .animation(.spring(response: 0.3, dampingFraction: 0.8), value: vm.isConnected)
-
-                        Spacer().frame(height: 48)
                     }
+                    .background(AppTheme.background)
                 }
             }
             .navigationBarHidden(true)
diff --git a/Shared/Components/UGreenCompatibilityBadge.swift b/Shared/Components/UGreenCompatibilityBadge.swift
index 110e99e..9175127 100644
--- a/Shared/Components/UGreenCompatibilityBadge.swift
+++ b/Shared/Components/UGreenCompatibilityBadge.swift
@@ -1,31 +1,24 @@
 import SwiftUI
-import UIKit
 
-// Displays the UGreen NAS compatibility indicator.
-// If you add an image named "ugreen_logo" to Assets.xcassets it will be used automatically.
-// Otherwise a brand-styled text badge is shown.
 struct UGreenCompatibilityBadge: View {
-    private static let ugreenGreen = Color(hex: "#00B388")
-    private let hasLogo = UIImage(named: "ugreen_logo") != nil
+    var selectedProtocol: NASProtocol = .smb
+
+    private var dotColor: Color {
+        selectedProtocol == .smb ? Color(hex: "#00B388") : AppTheme.inkQuaternary
+    }
 
     var body: some View {
         HStack(spacing: 8) {
-            // UGreen logo or fallback wordmark
-            if hasLogo {
-                Image("ugreen_logo")
-                    .resizable()
-                    .scaledToFit()
-                    .frame(height: 14)
-            } else {
-                HStack(spacing: 4) {
-                    // Brand dot
-                    Circle()
-                        .fill(Self.ugreenGreen)
-                        .frame(width: 6, height: 6)
-                    Text("UGreen NAS")
-                        .font(.system(size: 11, weight: .semibold))
-                        .foregroundStyle(Self.ugreenGreen)
-                }
+            // Status dot + UGreen NAS label
+            HStack(spacing: 4) {
+                Circle()
+                    .fill(dotColor)
+                    .frame(width: 6, height: 6)
+                    .animation(.spring(response: 0.25, dampingFraction: 0.8), value: selectedProtocol)
+                Text("UGreen NAS")
+                    .font(.system(size: 11, weight: .semibold))
+                    .foregroundStyle(dotColor)
+                    .animation(.spring(response: 0.25, dampingFraction: 0.8), value: selectedProtocol)
             }
 
             // Separator
@@ -33,10 +26,11 @@ struct UGreenCompatibilityBadge: View {
                 .fill(AppTheme.inkQuaternary)
                 .frame(width: 0.5, height: 11)
 
-            // Protocol hint
-            Text("SMB · SFTP")
-                .font(.system(size: 11, weight: .regular))
-                .foregroundStyle(AppTheme.inkTertiary)
+            // Active protocol label
+            Text(selectedProtocol.rawValue)
+                .font(.system(size: 11, weight: .medium))
+                .foregroundStyle(selectedProtocol == .smb ? dotColor : AppTheme.inkTertiary)
+                .contentTransition(.identity)
         }
         .padding(.horizontal, 12)
         .padding(.vertical, 6)