Refine iOS connection empty states

Author: arul28

apps/ios/ADE/App/ContentView.swift

@@ -378,6 +378,31 @@ private struct ProjectHomeView: View {
   }
 
   private var emptyProjects: some View {
+    Group {
+      if syncService.connectionState == .disconnected || syncService.connectionState == .error {
+        noMachineConnectedCard
+      } else {
+        emptyProjectsActionCard
+      }
+    }
+  }
+
+  private var noMachineConnectedCard: some View {
+    Text("No machine connected")
+      .font(.system(.subheadline, design: .rounded).weight(.medium))
+      .foregroundStyle(ADEColor.textSecondary)
+      .multilineTextAlignment(.center)
+      .frame(maxWidth: .infinity, alignment: .center)
+      .padding(14)
+      .background(ADEColor.cardBackground.opacity(0.62), in: RoundedRectangle(cornerRadius: 8, style: .continuous))
+      .overlay(
+        RoundedRectangle(cornerRadius: 8, style: .continuous)
+          .stroke(ADEColor.border.opacity(0.80), lineWidth: 1)
+      )
+      .accessibilityLabel("No machine connected")
+  }
+
+  private var emptyProjectsActionCard: some View {
     Button {
       syncService.settingsPresented = true
     } label: {
@@ -412,7 +437,7 @@ private struct ProjectHomeView: View {
     switch syncService.connectionState {
     case .connected, .syncing: return "No projects on machine"
     case .connecting: return "Connecting to machine"
-    case .error, .disconnected: return "Connect to a machine running ADE"
+    case .error, .disconnected: return "No projects on machine"
     }
   }
 
@@ -423,7 +448,7 @@ private struct ProjectHomeView: View {
     case .connecting:
       return syncService.hostName ?? "Projects appear after this iPhone connects"
     case .error, .disconnected:
-      return "Connect first before you can see projects"
+      return "Open a project on your machine"
     }
   }
 }

apps/ios/ADE/Views/Settings/ConnectionSettingsView.swift

@@ -43,9 +43,6 @@ struct ConnectionSettingsView: View {
           )
             .padding(.horizontal, 16)
 
-          SettingsTailscaleHelpSection()
-            .padding(.horizontal, 16)
-
           SettingsNotificationsSection(
             onPreferencesChanged: { prefs in
               syncService.uploadNotificationPrefs(prefs)
@@ -275,39 +272,6 @@ private final class SettingsConnectionPresentationModel: ObservableObject {
   }
 }
 
-private struct SettingsTailscaleHelpSection: View {
-  var body: some View {
-    VStack(alignment: .leading, spacing: 10) {
-      HStack(alignment: .center, spacing: 10) {
-        Image(systemName: "network")
-          .font(.system(size: 15, weight: .semibold))
-          .foregroundStyle(ADEColor.purpleAccent)
-          .frame(width: 28, height: 28)
-          .background(ADEColor.purpleAccent.opacity(0.14), in: RoundedRectangle(cornerRadius: 9, style: .continuous))
-        VStack(alignment: .leading, spacing: 2) {
-          Text("Away from home")
-            .font(.subheadline.weight(.semibold))
-            .foregroundStyle(ADEColor.textPrimary)
-          Text("Install Tailscale on this iPhone and your ADE machine. Pair once on local Wi-Fi or enter the machine's Tailscale address, then reconnect from the saved machine when you are away.")
-            .font(.caption)
-            .foregroundStyle(ADEColor.textSecondary)
-            .fixedSize(horizontal: false, vertical: true)
-        }
-      }
-    }
-    .padding(14)
-    .frame(maxWidth: .infinity, alignment: .leading)
-    .background(
-      RoundedRectangle(cornerRadius: 18, style: .continuous)
-        .fill(Color.white.opacity(0.045))
-    )
-    .overlay(
-      RoundedRectangle(cornerRadius: 18, style: .continuous)
-        .strokeBorder(Color.white.opacity(0.08), lineWidth: 0.8)
-    )
-  }
-}
-
 private struct SettingsAuroraBackground: View {
   var body: some View {
     ZStack {

apps/ios/ADE/Views/Settings/SettingsConnectionHeader.swift

@@ -39,6 +39,7 @@ struct SettingsConnectionHeader: View {
           onDisconnect: onDisconnect,
           onReconnect: onReconnect
         )
+        .layoutPriority(1)
       }
 
       if health.transport.isConnected {
@@ -52,7 +53,7 @@ struct SettingsConnectionHeader: View {
           .foregroundStyle(ADEColor.textSecondary)
           .fixedSize(horizontal: false, vertical: true)
       } else {
-        Text("Pair a machine to start syncing lanes, work, and files.")
+        Text("Pair once on Wi‑Fi to remotely connect later.")
           .font(.subheadline)
           .foregroundStyle(ADEColor.textSecondary)
           .fixedSize(horizontal: false, vertical: true)
@@ -210,33 +211,26 @@ private struct SettingsConnectionQuickAction: View {
       .accessibilityLabel("Disconnect from machine")
 
     case .connecting:
-      HStack(spacing: 8) {
+      // Status copy lives in the header's leading column — keep the trailing
+      // control compact so it never steals width from the title stack.
+      Button {
+        onDisconnect()
+      } label: {
         HStack(spacing: 6) {
           ProgressView().controlSize(.mini)
-          Text("Connecting")
-            .font(.caption.weight(.medium))
-            .foregroundStyle(ADEColor.textSecondary)
-        }
-        .padding(.horizontal, 10)
-        .padding(.vertical, 7)
-        .background(ADEColor.textSecondary.opacity(0.1), in: Capsule())
-        .glassEffect()
-
-        // Always offer a way out of a connect attempt — `disconnect()` cancels
-        // the in-flight attempt so the user is never stuck watching a spinner.
-        Button {
-          onDisconnect()
-        } label: {
           Text("Cancel")
             .font(.caption.weight(.semibold))
             .foregroundStyle(ADEColor.textSecondary)
-            .padding(.horizontal, 10)
-            .padding(.vertical, 7)
+            .lineLimit(1)
         }
-        .buttonStyle(.plain)
-        .background(ADEColor.textSecondary.opacity(0.1), in: Capsule())
-        .accessibilityLabel("Cancel connecting")
+        .padding(.horizontal, 10)
+        .padding(.vertical, 7)
       }
+      .buttonStyle(.plain)
+      .background(ADEColor.textSecondary.opacity(0.1), in: Capsule())
+      .glassEffect()
+      .fixedSize(horizontal: true, vertical: false)
+      .accessibilityLabel("Cancel connecting")
 
     case .error, .disconnected:
       if canReconnectToSavedHost {