Paginate messages by published year/month

Author: amatsuda

app/controllers/messages_controller.rb

@@ -2,12 +2,17 @@ class MessagesController < ApplicationController
   PER_PAGE = 50
 
   # GET /ruby-dev or /q=searchterm
-  def index(list_name: nil, q: nil, page: nil)
+  def index(list_name: nil, yyyymm: nil, q: nil, page: nil)
     if list_name
       @list = List.find_by_name list_name
 
-      messages = Message.with_recursive(parent_and_children: [Message.where(list_id: @list, parent_id: nil).order(:id).limit(100), Message.joins('inner join parent_and_children on messages.parent_id = parent_and_children.id')])
+      @yyyymms = Message.where(list_id: @list).order('yyyymm').pluck(Arel.sql "distinct to_char(published_at, 'YYYYMM') as yyyymm")
+      @yyyymm = yyyymm || @yyyymms.last
+
+      root_query = Message.where(list_id: @list, parent_id: nil).where("to_char(published_at, 'YYYYMM') = ?", @yyyymm).order(:id)
+      messages = Message.with_recursive(parent_and_children: [root_query, Message.joins('inner join parent_and_children on messages.parent_id = parent_and_children.id')])
         .joins('inner join parent_and_children on parent_and_children.id = messages.id')
+
       @messages = compose_tree(messages)
     elsif q
       search q, page

app/views/messages/index.html.erb

@@ -6,6 +6,21 @@
   </div>
 <% end %>
 
+<div class="mb-4 border border-gray-200 dark:border-gray-700 rounded-lg p-3 bg-white dark:bg-gray-800">
+  <% @yyyymms.group_by {|yyyymm| yyyymm[0, 4] }.sort.each do |year, months| %>
+    <div class="flex gap-1 items-center mb-1">
+      <span class="text-sm font-medium text-gray-700 dark:text-gray-300 w-12"><%= year %>:</span>
+      <div class="flex gap-1 flex-wrap">
+        <% months.sort.each do |yyyymm| %>
+          <%= link_to [@list, yyyymm: yyyymm], class: "px-2 py-1 text-xs font-medium rounded transition-colors #{@yyyymm == yyyymm ? 'bg-red-600 dark:bg-red-500 text-white border-2 border-red-700 dark:border-red-400' : 'bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 border-2 border-transparent'}" do %>
+            <%= yyyymm[4..] %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>
+
 <div class="grid grid-cols-4 gap-6" style="height: calc(100vh - 16rem);" data-controller="message-list">
   <div class="col-span-1 overflow-y-auto space-y-6">
     <%= render partial: 'thread', collection: @messages, as: :message, locals: {list: @list, depth: 0} %>