Fix mobile layout for mods table and pagination

.env.example

@@ -0,0 +1,6 @@
+# Copy this file to .env and fill in your values
+# cp .env.example .env
+
+GOOGLE_PROJECT_ID=your-firebase-project-id
+STORAGE_BUCKET_NAME=your-storage-bucket-name
+GOOGLE_REGION=us-central1

.gitignore

@@ -38,8 +38,16 @@
 
 /app/assets/builds/*
 !/app/assets/builds/.keep
+.env
 .env.*
+!.env.example
 
 # Claude Code local settings
 .claude/
+
+# Serena MCP plugin
+.serena/
+
+# Playwright MCP plugin
+.playwright-mcp/
 firebase-debug.log

.ruby-version

@@ -1 +1 @@
-3.4.8
+3.4.9

app/controllers/mods_controller.rb

@@ -1,33 +1,22 @@
 # frozen_string_literal: true
 
 class ModsController < ApplicationController
+  include PaginationHelper
+
   before_action :authors, only: %i[index show]
   before_action :mods, only: %i[index show]
   before_action :set_session, only: %i[index]
 
   def index
-    @mods = find_mods_by_author(sanitize(params[:author])) if params[:author].present?
-
-    # If we're given a mod ID, try to find it and redirect to the mod's page
-    if @mods.empty? && params[:author].present?
-      @mod = mods.find { |mod| mod.id == params[:author] }
-      return redirect_to mod_detail_path(author: @mod.author_slug, slug: @mod.slug) if @mod.present?
-    end
-
-    # Perform a search if we have a query
-    @mods = find_mods(sanitize(params[:query])) if params[:query].present?
+    @filtered = false
 
-    # Sort the mods if we have a sort key
-    # Disabled for now, as it's redundant with the search
-    # params[:sort].present? && Mod::SORTKEYS.include?(params[:sort]) && @mods.sort_by! { |mod| [mod.send(sanitize(params[:sort])), mod.name] }
+    filter_by_author
+    return if performed?
 
+    filter_by_query
     @total_mods = @mods.size
-
-    if turbo_frame_request?
-      render partial: "mods", locals: { mods: @mods }
-    else
-      render :index
-    end
+    paginate_mods unless @filtered
+    render_index
   end
 
   def show
@@ -46,6 +35,39 @@ def show
 
   private
 
+  def filter_by_author
+    return if params[:author].blank?
+
+    @mods = find_mods_by_author(sanitize(params[:author]))
+    @filtered = true
+
+    # If no mods found by author slug, try to find by mod ID and redirect
+    return unless @mods.empty?
+
+    @mod = mods.find { |mod| mod.id == params[:author] }
+    redirect_to mod_detail_path(author: @mod.author_slug, slug: @mod.slug) if @mod.present?
+  end
+
+  def filter_by_query
+    return if params[:query].blank?
+
+    @mods = find_mods(sanitize(params[:query]))
+    @filtered = true
+  end
+
+  def paginate_mods
+    @pagination = paginate_array(@mods, page: params[:page])
+    @mods = @pagination.items
+  end
+
+  def render_index
+    if turbo_frame_request?
+      render partial: "mods", locals: { mods: @mods }
+    else
+      render :index
+    end
+  end
+
   def find_mods(query)
     # Escape regex special characters to prevent injection
     escaped_query = Regexp.escape(query)

app/helpers/application_helper.rb

@@ -14,15 +14,23 @@ def block_code(code, language)
   def markdown(text)
     return if text.blank?
 
-    coderayified = CodeRayify.new(filter_html: true, hard_wrap: true)
-
-    options = {
-      fenced_code_blocks: true,
-      no_intra_emphasis: true,
-      autolink: true,
-      lax_html_blocks: true
-    }
-    markdown_to_html = Redcarpet::Markdown.new(coderayified, options)
-    sanitize(markdown_to_html.render(text))
+    sanitize(markdown_renderer.render(text))
+  end
+
+  private
+
+  def markdown_renderer
+    @markdown_renderer ||= begin
+      coderayified = CodeRayify.new(filter_html: true, hard_wrap: true)
+
+      options = {
+        fenced_code_blocks: true,
+        no_intra_emphasis: true,
+        autolink: true,
+        lax_html_blocks: true
+      }
+
+      Redcarpet::Markdown.new(coderayified, options)
+    end
   end
 end

app/helpers/pagination_helper.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module PaginationHelper
+  DEFAULT_PER_PAGE = 20
+
+  # Paginates an array and returns the current page slice
+  def paginate_array(collection, page:, per_page: DEFAULT_PER_PAGE)
+    page = [page.to_i, 1].max
+    total = collection.size
+    total_pages = (total / per_page.to_f).ceil
+    page = [page, total_pages].min if total_pages.positive?
+
+    offset = (page - 1) * per_page
+    items = collection[offset, per_page] || []
+
+    PaginationResult.new(
+      items: items, current_page: page, total_pages: total_pages,
+      total_count: total, per_page: per_page
+    )
+  end
+
+  class PaginationResult
+    attr_reader :items, :current_page, :total_pages, :total_count, :per_page
+
+    def initialize(items:, current_page:, total_pages:, total_count:, per_page:)
+      @items = items
+      @current_page = current_page
+      @total_pages = total_pages
+      @total_count = total_count
+      @per_page = per_page
+    end
+
+    def first_page?
+      current_page <= 1
+    end
+
+    def last_page?
+      current_page >= total_pages
+    end
+
+    def paginated?
+      total_pages > 1
+    end
+
+    def previous_page
+      current_page - 1 unless first_page?
+    end
+
+    def next_page
+      current_page + 1 unless last_page?
+    end
+
+    # Returns an array of page numbers with ellipsis markers (nil) for gaps
+    def page_range(window: 2)
+      return (1..total_pages).to_a if total_pages <= (window * 2) + 5
+
+      pages = []
+      pages << 1
+
+      left = [current_page - window, 2].max
+      right = [current_page + window, total_pages - 1].min
+
+      pages << nil if left > 2
+      (left..right).each { |p| pages << p }
+      pages << nil if right < total_pages - 1
+
+      pages << total_pages
+      pages
+    end
+  end
+end

app/javascript/controllers/mods_controller.js

@@ -37,7 +37,7 @@ export default class extends Controller {
     clearTimeout(this.timeout)
     this.timeout = setTimeout(() => {
       event.target.form.requestSubmit();
-    }, 200)
+    }, 400)
   }
 
   submit(event) {

app/javascript/controllers/theme_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Manages dark/light theme toggle with localStorage persistence.
+// Falls back to OS preference when no saved preference exists.
+export default class extends Controller {
+  static targets = ["icon"]
+
+  connect() {
+    this.updateIcon()
+  }
+
+  toggle() {
+    const html = document.documentElement
+    if (html.classList.contains("dark")) {
+      html.classList.remove("dark")
+      localStorage.setItem("theme", "light")
+    } else {
+      html.classList.add("dark")
+      localStorage.setItem("theme", "dark")
+    }
+    this.updateIcon()
+  }
+
+  updateIcon() {
+    if (!this.hasIconTarget) return
+    const isDark = document.documentElement.classList.contains("dark")
+    this.iconTarget.innerHTML = isDark ? "\uD83C\uDF19" : "\u2600\uFE0F"
+  }
+}

app/models/concerns/displayable.rb

@@ -19,6 +19,8 @@ def details
   end
 
   def author_slug
+    return "unknown" unless author
+
     author.parameterize
   end