Handle conversation form errors via Turbo Stream (#1006)

## Summary
- Add Turbo Stream error handling to conversation creation failures
- Show validation messages in `form_errors` frame
- Enhance Stimulus form validation controller to render server-side
errors on 422 responses

## Testing
- `bundle exec rubocop` *(fails: command not found)*
- `bundle exec brakeman -q -w2` *(fails: command not found)*
- `bundle exec bundler-audit --update` *(fails: command not found)*
- `bin/codex_style_guard` *(fails: command not found)*
- `bin/ci` *(fails: command not found)*

------
https://chatgpt.com/codex/tasks/task_e_689b64c801a483219d5c496b53f5584f

Author: rsmithlal

app/controllers/better_together/conversations_controller.rb

@@ -20,7 +20,7 @@ def new
       authorize @conversation
     end
 
-    def create # rubocop:todo Metrics/MethodLength
+    def create # rubocop:todo Metrics/MethodLength, Metrics/AbcSize
       @conversation = Conversation.new(conversation_params.merge(creator: helpers.current_person))
 
       authorize @conversation
@@ -33,7 +33,12 @@ def create # rubocop:todo Metrics/MethodLength
           format.html { redirect_to @conversation }
         end
       else
-        render :new
+        respond_to do |format|
+          format.turbo_stream do
+            render :create_error, status: :unprocessable_entity
+          end
+          format.html { render :new, status: :unprocessable_entity }
+        end
       end
     end
 

app/javascript/controllers/better_together/form_validation_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
+import { Turbo } from "@hotwired/turbo-rails";
 
 export default class extends Controller {
   static targets = ["input"];
@@ -19,13 +20,15 @@ export default class extends Controller {
 
     // Handle form submission
     this.element.addEventListener("submit", this.handleFormSubmit.bind(this));
+    this.element.addEventListener("turbo:submit-end", this.handleSubmitEnd.bind(this));
 
     // Handle Turbo navigation (unsaved changes warning)
     document.addEventListener("turbo:before-visit", this.handleTurboNavigation.bind(this));
   }
 
   disconnect() {
     document.removeEventListener("turbo:before-visit", this.handleTurboNavigation.bind(this));
+    this.element.removeEventListener("turbo:submit-end", this.handleSubmitEnd.bind(this));
   }
 
   storeInitialValues() {
@@ -59,6 +62,18 @@ export default class extends Controller {
     this.isSubmitting = true;
   }
 
+  async handleSubmitEnd(event) {
+    const { success, fetchResponse } = event.detail;
+
+    if (!success && fetchResponse?.response.status === 422) {
+      const html = await fetchResponse.responseHTML;
+      Turbo.renderStreamMessage(html);
+      this.isSubmitting = false;
+    } else if (success) {
+      this.resetValidation();
+    }
+  }
+
   handleTurboNavigation(event) {
     if (this.isFormDirty() && !this.isSubmitting) {
       const confirmation = confirm("You have unsaved changes. Are you sure you want to leave?");

app/views/better_together/conversations/create_error.turbo_stream.erb

@@ -0,0 +1 @@
+<%= turbo_stream.update 'form_errors', partial: 'layouts/better_together/errors', locals: { object: @conversation } %>

app/views/better_together/conversations/new.html.erb

@@ -4,9 +4,10 @@
       <h6 class="mb-0"><%= t('.new_conversation') %></h6>
     </div>
 
-    <div class="card-body">
-      <%= form_with(model: @conversation, local: true, data: { turbo: false, controller: 'better_together--form-validation'}) do |form| %>
-        <div class="mb-3">
+      <div class="card-body">
+        <%= form_with(model: @conversation, data: { controller: 'better_together--form-validation' }) do |form| %>
+          <%= turbo_frame_tag 'form_errors' %>
+          <div class="mb-3">
           <%= form.label :participant_ids, t('.add_participants') %>
           <%= form.collection_select :participant_ids, available_participants, :id, :select_option_title, { }, { multiple: true, class: 'form-select', required: true, data: { controller: "better_together--slim-select" } } %>
         </div>