posts: factor out post gallery component.

Factor out thumbnail galleries into a PostGallery component.

This changes the html structure so that post galleries on all pages are
always wrapped in a `.posts-container` class. This fixes an issue with
thumbnails on the pool show page not being aligned correctly on mobile,
like they are on the post index page. This also affected thumbnail
galleries on other pages, like wiki pages and user profiles.

app/components/post_gallery_component.rb

@@ -0,0 +1,56 @@
+# A component that displays a gallery of post thumbnails.
+#
+# There are three types of galleries:
+#
+# * Paginated galleries, as seen on the post index page and pool show page.
+# * Unpaginated galleries, as seen on wiki pages, artist pages, and user profiles.
+# * Inline galleries that fit on a single row, as seen in parent/child post sets.
+#
+class PostGalleryComponent < ApplicationComponent
+  attr_reader :posts, :current_user, :inline, :options
+
+  delegate :post_preview, :numbered_paginator, to: :helpers
+
+  # A gallery can optionally have a footer that displays between the posts and the paginator.
+  renders_one :footer
+
+  # @param posts [Array<Post>, ActiveRecord::Relation<Post>] The set of posts to display
+  # @param current_user [User] The current user.
+  # @param inline [Boolean] If true, the gallery is rendered as a single row with a
+  #   horizontal scrollbar. If false, the gallery is rendered as a grid of thumbnails.
+  # @param options [Hash] A set of options given to the thumbnail in `post_preview`.
+  def initialize(posts:, current_user:, inline: false, **options)
+    super
+    @posts = posts
+    @posts = @posts.includes(:media_asset) if posts.is_a?(ActiveRecord::Relation)
+    @current_user = current_user
+    @inline = inline
+    @options = options
+  end
+
+  def gallery_type
+    if inline
+      :inline
+    elsif has_paginator?
+      :paginated
+    else
+      :unpaginated
+    end
+  end
+
+  def has_paginator?
+    posts.respond_to?(:total_count)
+  end
+
+  def total_count
+    if has_paginator?
+      posts.total_count
+    else
+      posts.length
+    end
+  end
+
+  def empty?
+    total_count == 0
+  end
+end

app/components/post_gallery_component/post_gallery_component.html.erb

@@ -0,0 +1,17 @@
+<div class="post-gallery post-gallery-<%= gallery_type %>">
+  <% if empty? %>
+    <p>No posts found.</p>
+  <% else %>
+    <div class="posts-container user-disable-cropped-<%= current_user.disable_cropped_thumbnails? %>">
+      <% posts.each do |post| -%>
+<%    %><%= post_preview(post, **options) -%>
+      <% end -%>
+    </div>
+  <% end %>
+
+  <%= footer %>
+
+  <% if has_paginator? %>
+    <%= numbered_paginator(posts) %>
+  <% end %>
+</div>

app/components/post_gallery_component/post_gallery_component.scss

@@ -0,0 +1,27 @@
+.post-gallery-inline {
+  overflow-x: auto;
+  white-space: nowrap;
+
+  article.post-preview {
+    width: auto;
+    height: auto;
+    margin: 0 0 0.5rem 0;
+    padding: 0.5rem;
+    overflow: hidden;
+    vertical-align: top;
+  }
+}
+
+@media screen and (max-width: 660px) {
+  .post-gallery-full {
+    .posts-container {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 0.25rem;
+
+      &.user-disable-cropped-false article.post-preview img.has-cropped-true {
+        object-fit: none;
+      }
+    }
+  }
+}