Increase chat message area chat message limit from 100 to 200, and add a chat history page that shows the last 2,000 messages

4 files changed, 29 insertions, 10 deletions

diff --git a/app/controllers/chat_messages_controller.rb b/app/controllers/chat_messages_controller.rb
index 9112bb7..a299379 100644
--- a/app/controllers/chat_messages_controller.rb
+++ b/app/controllers/chat_messages_controller.rb
@@ -1,7 +1,10 @@
 class ChatMessagesController < ApplicationController
   def index
-    # TODO: Let's rename this method to #list
-    @chat_messages = ChatMessage.order(created_at: :desc).limit(100).reverse
+    @chat_messages = ChatMessage.order(created_at: :desc).limit(2000)
+  end
+
+  def list
+    @chat_messages = ChatMessage.order(created_at: :asc).limit(200)
     render partial: "chat_messages/list"
   end
 
diff --git a/app/javascript/controllers/chat_controller.js b/app/javascript/controllers/chat_controller.js
index 95b61c5..0605b3a 100644
--- a/app/javascript/controllers/chat_controller.js
+++ b/app/javascript/controllers/chat_controller.js
@@ -18,7 +18,7 @@ export default class extends Controller {
   load() {
     this.scrollToBottom();
     if (this.outputTarget.innerHTML.trim() === "") {
-      fetch("/chat_messages")
+      fetch("/chat_messages/list")
         .then(response => response.text())
         .then(html => {
           this.outputTarget.innerHTML = html;
diff --git a/app/views/application/_chat.html.erb b/app/views/application/_chat.html.erb
index b656ed7..1ba6f8f 100644
--- a/app/views/application/_chat.html.erb
+++ b/app/views/application/_chat.html.erb
@@ -3,13 +3,20 @@
     <div data-chat-target="output" id="chat_output" class="game-container-box overflow-y-auto overflow-x-hidden break-words flex-grow">
     </div>
     <div class="flex-none">
-      <%= form_with model: ChatMessage.new, html: { autocomplete: "off" }, local: false,
-                    data: { action: "chat#send" }, class: "flex" do |f| %>
-        <%= f.collection_select :chat_room_id, ChatRoom.accessible_to(current_char.user),
-                                :id, :short_name, class: "flex-none" %>
-        <%= f.text_field :body, size: "1", maxlength: 255, required: true,
-                         data: { chat_target: "message" }, class: "flex-grow inline-flex" %>
-      <% end %>
+      <div class="flex items-center">
+        <div class="flex-grow">
+          <%= form_with model: ChatMessage.new, html: { autocomplete: "off" }, local: false,
+                        data: { action: "chat#send" }, class: "flex" do |f| %>
+            <%= f.collection_select :chat_room_id, ChatRoom.accessible_to(current_char.user),
+                                    :id, :short_name, class: "flex-none" %>
+            <%= f.text_field :body, size: "1", maxlength: 255, required: true,
+                             data: { chat_target: "message" }, class: "flex-grow inline-flex" %>
+          <% end %>
+        </div>
+        <div class="flex-none text-xs mx-2">
+          <%= link_to "History", chat_messages_path %>
+        </div>
+      </div>
     </div>
   </div>
 <% end %>
diff --git a/app/views/chat_messages/index.html.erb b/app/views/chat_messages/index.html.erb
new file mode 100644
index 0000000..8791e7b
--- /dev/null
+++ b/app/views/chat_messages/index.html.erb
@@ -0,0 +1,9 @@
+<h1 class="text-3xl mb-4">
+  Chat History
+</h1>
+
+<p class="mb-4">Last 2,000 messages listed from newest to oldest.</p>
+
+<div class="text-sm">
+  <%= render "chat_messages/list" %>
+</div>