use the list layout to render the conversation index and new views

Author: rsmithlal

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

@@ -0,0 +1,15 @@
+
+<div class="card shadow-sm">
+  <div class="card-header bg-secondary rounded-0 text-white d-flex flex-row justify-content-between align-items-center">
+    <h5 class="mb-0">
+      <%= link_to t('.conversations'), conversations_path, class: 'text-decoration-none text-light' %>
+    </h5>
+    <%= link_to new_conversation_path, class: "btn btn-xs btn-primary", data: { turbo_frame: "_top" } do %>
+      <%= t('.new') %> <i class="fas fa-plus ms-1"></i>
+    <% end %>
+  </div>
+  <%= yield if block_given? %>
+  <ul id="conversations_list" class="list-group list-group-flush flex-column">
+    <%= render(partial: 'better_together/conversations/conversation_with_last_message', collection: @conversations, as: :conversation)  || render(partial: 'better_together/conversations/empty') %>
+  </ul>
+</div>

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

@@ -1,10 +1,4 @@
-<%= render 'communicator' do %>
-  <%= content_tag :div, id: "conversations_index" do %>
-    <div class="px-4 mt-3">
-      <h3><%= t('.active_conversations') %></h3>
-      <ul class="list-group">
-        <%= render(partial: 'better_together/conversations/conversation_with_last_message', collection: @conversations, as: :conversation)  || render(partial: 'better_together/conversations/empty') %>
-      </ul>
-    </div>
-  <% end %>
+
+<%= content_tag :div, id: "conversations_index" do %>
+  <%= render 'list' %>
 <% end %>

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

@@ -1,7 +1,7 @@
-<%= render 'communicator' do %>
+<%= render layout: 'list' do %>
   <div id="new_conversation_form" class="conversation-messages card shadow-sm">
     <div class="card-header rounded-0 bg-primary text-white">
-      <h3 class="mb-0"><%= t('.new_conversation') %></h3>
+      <h6 class="mb-0"><%= t('.new_conversation') %></h6>
     </div>
 
     <div class="card-body">
@@ -17,7 +17,7 @@
         </div>
 
         <div>
-          <%= form.submit t('.create_conversation'), class: 'btn btn-primary' %>
+          <%= form.submit t('.create_conversation'), class: 'btn btn-sm btn-primary' %>
         </div>
       <% end %>
     </div>

config/locales/en.yml

@@ -11,17 +11,17 @@ en:
     contact_details:
       title: "Contact Details"
     conversations:
-      communicator:
+      list:
         create_conversation: "Create Conversation"
+        new_conversation: "New Conversation"
+        conversations: "Conversations"
+        new: "New"
+        add_participants: "Add Participants"
       conversation:
         last_message: "Last message"
       layout_with_sidebar:
         active_conversations: "Active Conversations"
         last_message: "Last message"
-        conversations: "Conversations"
-        new: "New"
-        new_conversation: "New Conversation"
-        add_participants: "Add Participants"
       empty:
         no_messages: "No messages yet. Why not start the conversation?"
     platform_invitation:

config/locales/es.yml

@@ -11,17 +11,17 @@ es:
     contact_details:
       title: "Detalles de Contacto"
     conversations:
-      communicator:
+      list:
         create_conversation: "Crear Conversación"
+        new_conversation: "Nueva Conversación"
+        conversations: "Conversaciones"
+        new: "Nuevo"
+        add_participants: "Agregar Participantes"
       conversation:
         last_message: "Último mensaje"
       layout_with_sidebar:
         active_conversations: "Conversaciones Activas"
         last_message: "Último mensaje"
-        conversations: "Conversaciones"
-        new: "Nuevo"
-        new_conversation: "Nueva Conversación"
-        add_participants: "Agregar Participantes"
       empty:
         no_messages: "Aún no hay mensajes. ¿Por qué no iniciar la conversación?"
     platform_invitation: