From cff40e68ac10d9e433626a3b756c8ddf3e2b1831 Mon Sep 17 00:00:00 2001 From: Ken Johnson Date: Sun, 7 Dec 2025 03:05:49 -0500 Subject: [PATCH] Modernize messages page with inbox cards and sticky compose form MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Complete redesign of the messaging interface with modern layout: Inbox improvements: - Replace table with modern message cards - Each message shows circular gradient avatar with person icon - Display sender name prominently with formatted date - Show full message text with proper line wrapping - Add Details and Delete action buttons with icons - Hover effect highlights each message - Beautiful empty state with inbox icon when no messages Send Message form: - Relocate to right sidebar with sticky positioning - Add green gradient header with send icon - Style as modern card with left border accent - Large form controls with icons for better UX - Recipient selector with all users - Expandable textarea for message composition - Full-width send button in success green - Helpful tip box below form - Modern Bootstrap 5 alerts with icons for success/error - Auto-reload page after successful send to show new message Layout enhancements: - Two-column responsive layout (8/4 split) - Inbox on left, compose on right - Sticky compose form stays visible while scrolling - Mobile-friendly with stacked layout on small screens - Replace all Bootstrap 2 classes (row-fluid, span12, widget) - Modern Bootstrap 5 grid and components - Turbolinks compatibility The page now provides a clean, modern messaging experience similar to contemporary email/messaging applications. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/views/messages/index.html.erb | 407 +++++++++++++++++++++--------- 1 file changed, 289 insertions(+), 118 deletions(-) diff --git a/app/views/messages/index.html.erb b/app/views/messages/index.html.erb index 49578b9..eee6678 100644 --- a/app/views/messages/index.html.erb +++ b/app/views/messages/index.html.erb @@ -1,138 +1,309 @@ -
-
- -
- -
-
-
-
- Messages for <%= current_user.full_name %> - -
-
-
- - - - - - - - - - - - <% if @messages.empty? %> - - <% end %> - <% @messages.each do |message| %> - - - - - - - <% end %> -
From:DateMessageActions
<%= "No messages!" %><%= message.creator_name %><%= message.created_at.to_date %><%= message.message %><%= link_to "Details", user_message_path(:id => message.id), {:class => "btn btn-info pull-left"}%> - <%= link_to "Delete", user_message_path(:id => message.id), {:method => 'delete', :class => "btn btn-danger pull-left"}%>
-
-
-
- +
+ +
+
+

+ Messages +

+

Inbox for <%= current_user.full_name %>

- - -
- -
-
-
-
- Send Message -
+
+ +
+ +
+
+
+

+ Inbox +

+

Your received messages

+
+
+ <% if @messages.any? %> +
+ <% @messages.each do |message| %> +
+
+
+ +
+
+
+
+
+ <%= message.creator_name %> +
+
+ + <%= message.created_at.strftime("%b %d, %Y") %> +
+
+
+ <%= message.message %> +
+
+ <%= link_to user_message_path(:id => message.id), class: "btn btn-sm btn-outline-primary" do %> + Details + <% end %> + <%= link_to user_message_path(:id => message.id), method: 'delete', data: { confirm: 'Are you sure?' }, class: "btn btn-sm btn-outline-danger" do %> + Delete + <% end %> +
+
+
+ <% end %> +
+ <% else %> +
+ +
No Messages Yet
+

Your inbox is empty. Send a message to get started!

-
- - -
-
- - <%= form_for @message, :url => user_messages_path, :method => :post, :html => {:id => "send_message"} do |f|%> - <%= f.hidden_field :creator_id, :value => current_user.id %> - <%= f.hidden_field :read, :value => '0' %> -
- <%= f.label "To:", nil, {:class => "control-label"}%> - <%= f.select(:receiver_id, options_from_collection_for_select(User.all, :id, :full_name)) %> -
- -
- <%= f.label :message, nil, {:class => "control-label"}%> - <%= f.text_area :message, {:class => "span12"} %> -
- -
- <%= f.submit "Submit", {:id => 'submit_button', :class => "btn btn-info pull-right"} %> -
- -
<% end %> - -
-
-
-
- +
+
+ + +
+
+
+

+ Send Message +

+

Compose a new message

+
+
+ + + + + + <%= form_for @message, url: user_messages_path, method: :post, html: { id: "send_message" } do |f| %> + <%= f.hidden_field :creator_id, value: current_user.id %> + <%= f.hidden_field :read, value: '0' %> + +
+ + <%= f.select(:receiver_id, + options_from_collection_for_select(User.all, :id, :full_name), + {}, + { class: "form-select form-select-lg" }) %> + Select message recipient +
+ +
+ + <%= f.text_area :message, + class: "form-control form-control-lg", + rows: 6, + placeholder: "Type your message here...", + style: "resize: vertical;" %> + Write your message content +
+ +
+ <%= f.submit "Send Message", + id: 'submit_button', + class: "btn btn-success btn-lg" %> +
+ +
+ + + Tip: Messages are delivered instantly + +
+ <% end %> +
+
-
- - + +