Improve display of conversation list

Author: rsmithlal

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

@@ -4,7 +4,7 @@
 
 <li id="<%= dom_id(conversation) %>" class="<%= dom_class(conversation) %> list-group-item rounded-0 <%= 'active' if conversation == @conversation %>">
   <%= link_to conversation_path(conversation), class: "stretched-link text-decoration-none d-flex justify-content-between" do %>
-    <div class="mb-1 conversation-participants justify-content-between">
+    <div class="mb-1 conversation-participants d-flex flex-wrap justify-content-start">
       <%= render partial: 'better_together/people/mention', collection: conversation.participants, as: :person %>
     </div>
 

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

@@ -2,16 +2,19 @@
 
 <%# locals: (conversation:, last_message: conversation.messages.last) %>
 
-<li id="<%= dom_id(conversation) %>" class="<%= dom_class(conversation) %> list-group-item <%= 'active' if conversation == @conversation %>">
-  <%= link_to conversation_path(conversation), class: "stretched-link text-decoration-none d-flex justify-content-between" do %>
-    <div class="mb-1 conversation-participants justify-content-between">
-      <%= render partial: 'better_together/people/mention', collection: conversation.participants.where.not(id: current_person.id), as: :person %>
-    </div>
-
-    <strong><%= conversation.title %></strong>
+<li id="<%= dom_id(conversation) %>" class="<%= dom_class(conversation) %> position-relative py-3 d-flex flex-column row-gap-2 list-group-item list-group-action <%= 'active' if conversation == @conversation %>">
+  <div class="flex-row">
+    <%= link_to conversation_path(conversation), class: "me-4 align-self-end text-decoration-none stretched-link d-flex flex-column text-center" do %>
+      <strong><%= conversation.title %></strong>
 
-    <div class="last-message">
-      <%= render(partial: 'better_together/messages/message_simple', locals: { message: last_message }) || render(partial: 'better_together/conversations/empty') %>
+      <small class="text-muted"><%= l(conversation.updated_at, format: :short) %></small>
+    <% end %>
+    <div class="conversation-participants d-flex align-items-top justify-content-evenly overflow-auto">
+      <%= render partial: 'better_together/people/mention', collection: conversation.participants, as: :person, locals: { flex_layout: 'flex-column', flex_align_items: 'center' } %>
     </div>
-  <% end %>
+  </div>
+
+  <div class="last-message bg-info-subtle p-2 rounded-2">
+    <%= last_message ? render(partial: 'better_together/messages/message_simple', locals: { message: last_message }) : render(partial: 'better_together/conversations/empty') %>
+  </div>
 </li>

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

@@ -8,6 +8,6 @@
     <% end %>
   </div>
   <ul id="conversations_list" class="list-group list-group-flush flex-row flex-md-column">
-    <%= render @conversations %> <!-- This renders each conversation using the _conversation.html.erb partial -->
+    <%= 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/messages/_message_simple.html.erb

@@ -2,8 +2,8 @@
 
 <%# locals: (message:, me: message.sender == current_person) %>
 
-<div class="<%= dom_class(message, :simple) %> message-container my-3 d-flex justify-content-between">
-  <div class="message-header d-flex">
+<div class="<%= dom_class(message, :simple) %> message-container my-3 d-flex flex-column justify-content-between">
+  <div class="message-header d-flex col-gap-2 justify-content-between">
     <strong class="me-2"><%= message.sender.name %></strong>
     <small class="text-muted"><%= l(message.created_at, format: :short) %></small>
   </div>

app/views/better_together/people/_mention.html.erb

@@ -1,10 +1,14 @@
 
 <%# locals: (person:, flex_layout: 'flex-row', flex_align_items: 'left')%>
 
-<div class="position-relative mention me-4 d-flex justify-content-between <%= flex_layout %> <%= "align-items-#{flex_align_items}" %> <%= dom_class(person, :mention) %> <%= 'me' if person == current_person %>" id="<%= dom_id(person, :mention) %>">
+<div class="position-relative mention py-2 me-2 d-flex justify-content-center row-gap-1 <%= flex_layout %> <%= "align-items-#{flex_align_items}" %> <%= dom_class(person, :mention) %> <%= 'me' if person == current_person %>" id="<%= dom_id(person, :mention) %>">
   <%# Display avatar and name inline %>
-  <%= profile_image_tag(person, class: 'mention', size: 50) %>
-  <a class="text-decoration-none identity-name stretched-link" href="<% policy(person).show? ? person_path(person) : '#' %>">
-    <%= person.name %>
-  </a>
+  <div class="h-50">
+    <%= profile_image_tag(person, class: 'mention', size: 50) %>
+  </div>
+  <div class="h-50 align-self-top">
+    <a class="text-decoration-none identity-name stretched-link" href="<%= policy(person).show? ? person_path(person) : 'test' %>">
+      <%= person.name %>
+    </a>
+  </div>
 </div>