Refactor ChatFeature views (#527)

* update ChatInputView

* update ChatFeatureView

* Pass store to SendButton instead of individual properties

Follow SwiftUI/TCA best practice: pass store reference to prevent parent re-renders.
Parent BasicInputView no longer reads store.isSendButtonDisabled or store.isSending.

* extract OverlayView

Author: mltbnz

CriticalMapsKit/Sources/ChatFeature/ChatFeatureView.swift

@@ -18,9 +18,9 @@ public struct ChatView: View {
         Color(.backgroundPrimary)
           .ignoresSafeArea()
           .accessibilityHidden(true)
-        
+
         if store.messages.isEmpty {
-          emptyState
+          ChatEmptyStateView()
             .accessibilitySortPriority(-1)
         } else {
           List(store.messages) { chat in
@@ -34,35 +34,45 @@ public struct ChatView: View {
           .accessibleAnimation(.spring, value: store.messages)
         }
       }
-      
-      chatInput
+
+      ChatInputArea(
+        store: store.scope(
+          state: \.chatInputState,
+          action: \.chatInput
+        )
+      )
     }
     .alert(store: store.scope(state: \.$alert, action: \.alert))
     .onAppear { store.send(.onAppear) }
     .navigationBarTitleDisplayMode(.inline)
     .ignoresSafeArea(.container, edges: .bottom)
   }
-  
-  private var chatInput: some View {
+}
+
+// MARK: - Subviews
+
+private struct ChatInputArea: View {
+  let store: StoreOf<ChatInput>
+
+  var body: some View {
     ZStack(alignment: .top) {
       BasicInputView(
-        store: store.scope(
-          state: \.chatInputState,
-          action: \.chatInput
-        ),
+        store: store,
         placeholder: L10n.Chat.placeholder
       )
       .padding(.horizontal, .grid(3))
       .padding(.top, .grid(2))
       .padding(.bottom, .grid(7))
-      
+
       Color(.border)
         .frame(height: 2)
     }
     .background(Color.backgroundSecondary)
   }
-  
-  private var emptyState: some View {
+}
+
+private struct ChatEmptyStateView: View {
+  var body: some View {
     EmptyStateView(
       emptyState: .init(
         icon: Asset.chatEmpty.image,
@@ -75,7 +85,7 @@ public struct ChatView: View {
   }
 }
 
-// MARK: Preview
+// MARK: - Preview
 
 #Preview {
   ChatView(

CriticalMapsKit/Sources/ChatFeature/ChatInputView.swift

@@ -25,7 +25,38 @@ public struct BasicInputView: View {
     )
   }
 
-  private var messageEditorView: some View {
+  public var body: some View {
+    VStack {
+      HStack(alignment: .bottom) {
+        MessageEditorView(
+          store: $store,
+          placeholder: placeholder,
+          contentSizeThatFits: $contentSizeThatFits,
+          messageEditorHeight: messageEditorHeight
+        )
+
+        SendButton(store: store)
+      }
+      .padding(.grid(1))
+      .background(Color.backgroundPrimary)
+      .clipShape(RoundedRectangle(cornerRadius: 23))
+      .overlay(
+        RoundedRectangle(cornerRadius: 23)
+          .stroke(Color.innerBorder, lineWidth: 1)
+      )
+    }
+  }
+}
+
+// MARK: - Subviews
+
+private struct MessageEditorView: View {
+  @Binding var store: StoreOf<ChatInput>
+  let placeholder: String
+  @Binding var contentSizeThatFits: CGSize
+  let messageEditorHeight: CGFloat
+
+  var body: some View {
     MultilineTextField(
       attributedText: $store.internalAttributedMessage.sending(\.messageChanged),
       placeholder: placeholder,
@@ -39,54 +70,45 @@ public struct BasicInputView: View {
     }
     .frame(height: messageEditorHeight)
   }
+}
 
-  private var sendButton: some View {
-    Button(action: {
-      store.send(.onCommit)
-    }, label: {
-      Circle().fill(
-        withAnimation {
-          store.isSendButtonDisabled ? Color(.border) : .blue
-        }
-      )
-      .accessibleAnimation(.spring(duration: 0.13), value: store.isSendButtonDisabled)
-      .accessibilityLabel(Text(L10n.Chat.send))
-      .frame(width: 38, height: 38)
-      .overlay(
-        Group {
-          if store.isSending {
-            ProgressView().tint(.white)
-          } else {
-            Image(systemName: "paperplane.fill")
-              .resizable()
-              .foregroundColor(.white)
-              .offset(x: -1, y: 1)
-              .padding(.grid(2))
-          }
-        }
-      )
-    })
-    .disabled(store.isSendButtonDisabled)
+private struct SendButton: View {
+  let store: StoreOf<ChatInput>
+
+  var body: some View {
+    Button(action: { store.send(.onCommit) }) {
+      Circle()
+        .fill(Color.brand500)
+        .frame(width: 38, height: 38)
+        .overlay(OverlayView(store: store))
+        .accessibleAnimation(.spring(duration: 0.13), value: store.isSendButtonDisabled)
+        .accessibilityLabel(Text(L10n.Chat.send))
+    }
+    .opacity(store.isSendButtonDisabled ? 0 : 1)
+    .animation(.snappy.speed(2.5), value: store.isSendButtonDisabled)
   }
+}
 
-  public var body: some View {
-    VStack {
-      HStack(alignment: .bottom) {
-        messageEditorView
-        sendButton
-      }
-      .padding(.grid(1))
-      .background(Color.backgroundPrimary)
-      .clipShape(RoundedRectangle(cornerRadius: 23))
-      .overlay(
-        RoundedRectangle(cornerRadius: 23)
-          .stroke(Color.innerBorder, lineWidth: 1)
-      )
+// MARK: - SubViews
+
+private struct OverlayView: View {
+  let store: StoreOf<ChatInput>
+  
+  var body: some View {
+    if store.isSending {
+      ProgressView()
+        .tint(.textPrimaryLight)
+    } else {
+      Image(systemName: "paperplane.fill")
+        .resizable()
+        .foregroundColor(.textPrimaryLight)
+        .offset(x: -1, y: 1)
+        .padding(.grid(2))
     }
   }
 }
 
-// MARK: Implementation Details
+// MARK: - Implementation Details
 
 public struct ContentSizeThatFitsKey: PreferenceKey {
   public static var defaultValue: CGSize = .zero