recommendations: show favcount beneath recommended posts.

* Add favorite count beneath recommended posts. Clicking the favcount
  loads more recommended posts like that post.
* Increase number of recommendations shown on post show page.

app/javascript/src/javascripts/posts.js.erb

@@ -9,7 +9,7 @@ let Post = {};
 Post.pending_update_count = 0;
 Post.SWIPE_THRESHOLD = 60;
 Post.SWIPE_VELOCITY = 0.6;
-Post.MAX_RECOMMENDATIONS = 27; // 3 rows of 9 posts at 1920x1080.
+Post.MAX_RECOMMENDATIONS = 45; // 3 rows of 9 posts at 1920x1080.
 
 Post.initialize_all = function() {
 
@@ -30,6 +30,7 @@ Post.initialize_all = function() {
     this.initialize_post_sections();
     this.initialize_post_image_resize_links();
     this.initialize_post_image_resize_to_window_link();
+    this.initialize_recommended();
 
     if (CurrentUser.data("always-resize-images") || (Utility.meta("viewport") && (window.screen.width <= 660))) {
       $("#image-resize-to-window-link").click();
@@ -582,6 +583,17 @@ Post.initialize_saved_searches = function() {
   });
 }
 
+Post.initialize_recommended = function() {
+  $(document).on("click.danbooru", ".post-preview .more-recommended-posts", async function (event) {
+    event.preventDefault();
+
+    let post_id = $(this).parents(".post-preview").data("id");
+    $("#recommended").addClass("loading-recommended-posts");
+    await $.get("/recommended_posts.js", { search: { post_id: post_id }, limit: Post.MAX_RECOMMENDATIONS });
+    $("#recommended").removeClass("loading-recommended-posts");
+  });
+};
+
 Post.update_tag_count = function(event) {
   let string = "0 tags";
   let count = 0;

app/javascript/src/styles/specific/posts.scss

@@ -366,6 +366,11 @@ div#c-posts {
       margin-top: 0.5em;
     }
 
+    #recommended.loading-recommended-posts {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
     #pool-nav, #search-seq-nav, #favgroup-nav {
       li {
         position: relative;

app/presenters/post_presenter.rb

@@ -86,13 +86,19 @@ class PostPresenter < Presenter
       locals[:size] = nil
     end
 
+    if options[:recommended]
+      locals[:recommended] = options[:recommended].round(1)
+    else
+      locals[:recommended] = nil
+    end
+
     ApplicationController.render(partial: "posts/partials/index/preview", locals: locals)
   end
 
-  def self.preview_class(post, highlight_score: nil, pool: nil, size: nil, similarity: nil, compact: nil, **options)
+  def self.preview_class(post, highlight_score: nil, pool: nil, size: nil, similarity: nil, recommended: nil, compact: nil, **options)
     klass = ["post-preview"]
     # klass << " large-cropped" if post.has_cropped? && options[:show_cropped]
-    klass << "captioned" if pool || size || similarity
+    klass << "captioned" if pool || size || similarity || recommended
     klass << "post-status-pending" if post.is_pending?
     klass << "post-status-flagged" if post.is_flagged?
     klass << "post-status-deleted" if post.is_deleted?

app/views/posts/partials/index/_preview.html.erb

@@ -32,4 +32,20 @@
       <%= link_to "#{similarity}%", iqdb_queries_path(post_id: post.id) %> similarity
     </p>
   <% end -%>
+
+  <% if recommended -%>
+    <p class="desc recommended">
+      <%= link_to recommended_posts_path(search: { post_id: post.id }), class: "more-recommended-posts", "data-post-id": post.id do %>
+        <%= post.fav_count %>
+
+        <% if post.favorited_by?(CurrentUser.id) %>
+          <i class="fas fa-heart fa-xs"></i>
+        <% else %>
+          <i class="far fa-heart fa-xs"></i>
+        <% end %>
+
+        <br>more »
+      <% end %>
+    </p>
+  <% end -%>
 <% end -%>