Feature: Enhanced Mod Detail Pages

[AgentKush]

Summary

The mod detail page (show.html.erb) works but could be enhanced with better visual design, more useful information, and a layout that better showcases each mod. Currently it's functional but plain — adding structured sections, better download UX, and richer metadata display would make it a much more polished experience for users browsing mods.

Current Behavior

Looking at app/views/mods/show.html.erb:

• Header area: Mod name (text-icarus-500, bold) with download buttons (indigo) floated to the right
• Author line: "By {author}" in text-blue-500 with version string on the right
• EXMODZ note: Small text noting the mod includes EXMOD format, recommends Mod Manager
• Analytics button: Float-right link to analytics view (for mod authors)
• Content area: min-h-48 div with optional mod image (hidden on mobile, w-48 h-48 float-right) and markdown-rendered description (prose dark:prose-invert)
• Back button: "Back to List" using session[:origin_url]
• Meta tags: Already has content_for(:title), :meta_description, and :og_image

What's Missing:

• No file type/size information shown
• No last-updated date prominently displayed (it's in updated_string but positioned awkwardly)
• No compatibility badge/tag display
• No structured layout — everything is floated/flexed inline
• Mod image is hidden on mobile entirely (hidden md:block)
• No breadcrumb navigation back to author's mods
• Download buttons don't indicate which file type is recommended
• No visual separation between sections
• The analytics button is easy to miss (tiny float-right text link)

Proposed Enhancements

1. Breadcrumb Navigation

Add breadcrumbs at the top of the page for clear navigation hierarchy:

<nav class="text-sm text-slate-400 mb-4">
  <%= link_to "Mods", mods_path, class: "text-icarus-500 hover:text-blue-500 no-underline" %>
  <span class="mx-1">›</span>
  <%= link_to @mod.author, mods_author_path(author: @mod.author_slug), class: "text-icarus-500 hover:text-blue-500 no-underline" %>
  <span class="mx-1">›</span>
  <span><%= @mod.name %></span>
</nav>

This replaces the "Back to List" button at the bottom with always-visible navigation at the top, and adds an author link so users can browse other mods by the same author.

2. Structured Header Section

Replace the current float-based header with a clean structured layout:

<div class="flex flex-col md:flex-row md:items-start gap-6 mb-8">
  <%# Mod image — visible on all screen sizes, not just desktop %>
  <% if @mod.image_url.present? %>
    <img class="w-32 h-32 rounded-xl object-cover shadow-lg border-2 border-icarus-500"
         src="<%= raw_url(@mod.image_url) %>" alt="<%= @mod.name %>">
  <% end %>

  <div class="flex-1">
    <h1 class="text-3xl md:text-4xl font-extrabold text-icarus-500 mb-1"><%= @mod.name %></h1>
    <div class="text-lg text-blue-500 mb-2">
      By <%= link_to @mod.author, mods_author_path(author: @mod.author_slug),
                     class: "text-blue-500 hover:text-blue-400 no-underline" %>
    </div>

    <%# Metadata pills row %>
    <div class="flex flex-wrap gap-2 text-sm">
      <span class="px-2 py-0.5 rounded-full bg-slate-700 text-slate-300">
        v<%= @mod.version %>
      </span>
      <span class="px-2 py-0.5 rounded-full bg-slate-700 text-slate-300">
        <%= @mod.types_string %>
      </span>
      <% if @mod.compatibility.present? %>
        <span class="px-2 py-0.5 rounded-full bg-icarus-500/20 text-icarus-500">
          Week <%= @mod.compatibility %>
        </span>
      <% end %>
      <span class="px-2 py-0.5 rounded-full bg-slate-700 text-slate-400">
        Updated <%= @mod.updated_string %>
      </span>
    </div>
  </div>
</div>

3. Improved Download Section

Replace the inline download buttons with a dedicated download section with more context:

<div class="flex flex-wrap gap-3 mb-8 p-4 rounded-xl bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
  <% @mod.download_types.each do |type| %>
    <% if @mod.get_url(type) %>
      <button data-action="mods#download"
              data-mods-url-param="<%= raw_url(@mod.get_url(type)) %>"
              data-mods-file-name-param="<%= @mod.get_name(type) %>"
              type="button"
              class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg
                     <%= type == @mod.preferred_type ? 'bg-icarus-500 text-slate-900 hover:bg-icarus-400' : 'bg-indigo-600 text-white hover:bg-indigo-700' %>
                     transition-colors shadow-sm">
        ⬇ Download <%= type.to_s.upcase %>
        <%= "(Recommended)" if type == @mod.preferred_type %>
      </button>
    <% end %>
  <% end %>

  <% if @mod.exmodz? %>
    <p class="w-full text-xs text-slate-500 dark:text-slate-400 mt-2">
      This mod includes an EXMOD file — use
      <a href="https://github.com/DonovanMods/icarus-mod-tools" class="text-icarus-500 hover:text-blue-500">
        Icarus Mod Manager
      </a> to install it.
    </p>
  <% end %>
</div>

Key improvements:

• Preferred download type highlighted in gold instead of all buttons looking the same
• "(Recommended)" label on the preferred type
• EXMODZ note links to the Mod Manager repo
• Contained in a visually distinct card section

4. Show Mod Image on Mobile

Currently the mod image uses hidden md:block so mobile users never see it. Change to responsive sizing:

<img class="w-24 h-24 md:w-32 md:h-32 rounded-xl object-cover ..." ...>

Remove the hidden class — mobile users deserve to see the mod image too.

5. Better Analytics Section

The analytics button is currently a tiny text-xs float-right link that's easy to miss. Move it into a dedicated section:

<details class="mt-8 border border-slate-600 rounded-xl">
  <summary class="px-4 py-3 cursor-pointer text-icarus-500 font-medium hover:bg-slate-800 rounded-xl">
    📊 Analytics for Mod Authors
  </summary>
  <div class="p-4">
    <%= render("analytics", metadata: @mod.metadata&.dig(:status)) %>
  </div>
</details>

This uses a <details> disclosure element so analytics load inline without a separate page navigation, and it's more visible with an icon and proper styling.

6. "More by This Author" Section

Add a section at the bottom showing other mods by the same author:

<% other_mods = @mods&.select { |m| m.author == @mod.author && m.id != @mod.id }&.first(4) %>
<% if other_mods&.any? %>
  <div class="mt-8 pt-6 border-t border-slate-600">
    <h3 class="text-lg font-bold text-icarus-500 mb-3">More by <%= @mod.author %></h3>
    <div class="grid gap-3 md:grid-cols-2">
      <% other_mods.each do |mod| %>
        <%= link_to mod_detail_path(author: mod.author_slug, slug: mod.slug),
                    class: "block p-3 rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 no-underline transition-colors" do %>
          <div class="font-medium text-icarus-500"><%= mod.name %></div>
          <div class="text-sm text-slate-400 line-clamp-2"><%= mod.description %></div>
        <% end %>
      <% end %>
    </div>
  </div>
<% end %>

This keeps users engaged and helps them discover related mods without going back to the full list.

Files to Modify

File	Change
app/views/mods/show.html.erb	Full layout restructure with all enhancements above
app/controllers/mods_controller.rb	Pass @mods to show action for "More by Author" section (it's already loaded via before_action :mods)
app/views/mods/_analytics.html.erb	May need minor adjustments if analytics section is moved to inline disclosure

Design Notes

• Keep the gold (text-icarus-500) theme consistent with the rest of the restyled pages
• Use dark: Tailwind variants for all new elements — the site supports both themes
• Metadata pills use bg-slate-700 text-slate-300 for neutral info, bg-icarus-500/20 text-icarus-500 for gold-highlighted info
• Download section uses a card container (rounded-xl, border) to visually group all download options
• Preferred download button in gold (bg-icarus-500 text-slate-900) vs secondary buttons in indigo
• "More by Author" cards should have subtle hover state for discoverability

Testing

• Breadcrumbs display correctly: Mods > Author > Mod Name
• Breadcrumb links navigate to correct pages
• Mod image shows on both mobile and desktop
• Metadata pills display version, file types, compatibility, and update date
• Preferred download type is highlighted in gold with "(Recommended)" label
• Other download types show in standard indigo styling
• EXMODZ note appears with link to Mod Manager repo
• Analytics disclosure opens/closes inline
• "More by Author" section shows up to 4 other mods by the same author
• "More by Author" doesn't appear if the author has no other mods
• All elements styled correctly in both dark and light mode
• Back to List button still works via session[:origin_url]
• Page is responsive — no layout breaks on mobile