Show settings when tapping sync indicator (#1068)

Fixes #1031

- tap sync indicator to show settings
- surface sync failure in root settings view

<img
src="https://github.com/subconsciousnetwork/subconscious/assets/5009316/8f75c68e-cb8d-4903-ae27-db42a7b9dc80"
width="320">

xcode/Subconscious/Shared/Components/MainToolbar.swift

@@ -11,6 +11,7 @@ import ObservableStore
 
 struct SyncStatusView: View {
     var status: ResourceStatus
+    var action: () -> Void
 
     var color: Color {
         switch status {
@@ -41,23 +42,28 @@ struct SyncStatusView: View {
     @State var showLabel = true
 
     var body: some View {
-        HStack(spacing: AppTheme.unit2) {
-            ZStack {
-                Circle()
-                    .foregroundStyle(color)
-                Circle()
-                    .stroke(Color.separator.opacity(0.75), lineWidth: 0.5)
+        Button(
+            action: action,
+            label: {
+                HStack(spacing: AppTheme.unit2) {
+                    ZStack {
+                        Circle()
+                            .foregroundStyle(color)
+                        Circle()
+                            .stroke(Color.separator.opacity(0.75), lineWidth: 0.5)
+                    }
+                    .frame(width: 8, height: 8)
+
+                    Text(showLabel ? label : "")
+                        .font(.caption2)
+                        .foregroundStyle(.secondary)
+                        .transition(.opacity)
+                        .id("sync-status-label")
+                        .frame(width: 128, height: 16, alignment: .leading)
+                        .fixedSize(horizontal: true, vertical: true)
+                }
             }
-            .frame(width: 8, height: 8)
-
-            Text(showLabel ? label : "")
-                .font(.caption2)
-                .foregroundStyle(.secondary)
-                .transition(.opacity)
-                .id("sync-status-label")
-                .frame(width: 128, height: 16, alignment: .leading)
-                .fixedSize(horizontal: true, vertical: true)
-        }
+        )
         .onAppear {
             switch status {
             case .succeeded:
@@ -90,7 +96,12 @@ struct MainToolbar: ToolbarContent {
 
     var body: some ToolbarContent {
         ToolbarItem(placement: .navigationBarLeading) {
-            SyncStatusView(status: app.state.lastGatewaySyncStatus)
+            SyncStatusView(
+                status: app.state.lastGatewaySyncStatus,
+                action: {
+                    app.send(.presentSettingsSheet(true))
+                }
+            )
         }
 
         ToolbarItem(placement: .primaryAction) {

xcode/Subconscious/Shared/Components/Settings/SettingsView.swift

@@ -80,26 +80,43 @@ struct SettingsView: View {
                                 .lineLimit(1)
                             }
                         )
-
+                        
                         LabeledContent(
                             "Version",
                             value: app.state.sphereVersion ?? unknown
                         )
                         .lineLimit(1)
                         .textSelection(.enabled)
 
+                        let syncFailed: Bool = Func.run {
+                            switch app.state.lastGatewaySyncStatus {
+                            case .failed:
+                                return true
+                            default:
+                                return false
+                            }
+                        }
+
                         NavigationLink(
                             destination: {
                                 GatewayURLSettingsView(app: app)
                             },
                             label: {
-                                LabeledContent(
-                                    "Gateway",
-                                    value: app.state.gatewayURL
-                                )
-                                .lineLimit(1)
+                                HStack {
+                                    if (syncFailed) {
+                                        Image(
+                                            systemName: "exclamationmark.arrow.triangle.2.circlepath"
+                                        )
+                                    }
+                                    LabeledContent(
+                                        "Gateway",
+                                        value: app.state.gatewayURL
+                                    )
+                                    .lineLimit(1)
+                                }
                             }
                         )
+                        .foregroundColor(syncFailed ? .red : nil)
                     },
                     header: {
                         Text("Noosphere")