posts: make thumbnail size setting persistent.

Make setting the thumbnail size persistent.

The setting is stored in a `post_preview_size` cookie. This cookie can
be overridden by the `size` URL param, like so:

  https://danbooru.donmai.us/posts?tags=touhou&size=180

The `size` param is mainly for testing different sizes without setting a cookie.

app/controllers/posts_controller.rb

@@ -15,6 +15,7 @@ class PostsController < ApplicationController
     else
       tag_query = params[:tags] || params.dig(:post, :tags)
       @post_set = PostSets::Post.new(tag_query, params[:page], params[:limit], format: request.format.symbol, view: params[:view])
+      @preview_size = params[:size].presence || cookies[:post_preview_size].presence || PostPreviewComponent::DEFAULT_SIZE
       @posts = authorize @post_set.posts, policy_class: PostPolicy
       @post_set.log!
       respond_with(@posts) do |format|
@@ -55,6 +56,7 @@ class PostsController < ApplicationController
   def update
     @post = authorize Post.find(params[:id])
     @post.update(permitted_attributes(@post))
+    @preview_size = params[:size].presence || cookies[:post_preview_size].presence || PostPreviewComponent::DEFAULT_SIZE
     respond_with_post_after_update(@post)
   end
 

app/javascript/src/javascripts/posts.js

@@ -25,6 +25,7 @@ Post.initialize_all = function() {
   if ($("#c-posts").length && $("#a-index").length) {
     this.initialize_excerpt();
     this.initialize_gestures();
+    this.initialize_post_preview_size_menu();
   }
 
   if ($("#c-posts").length && $("#a-show").length) {
@@ -241,6 +242,19 @@ Post.toggle_relationship_preview = function(preview, preview_link) {
   }
 }
 
+Post.initialize_post_preview_size_menu = function() {
+  $(document).on("click.danbooru", ".post-preview-size-menu .popup-menu-content a", (e) => {
+    let url = new URL($(e.target).get(0).href);
+    let size = url.searchParams.get("size");
+
+    Cookie.put("post_preview_size", size);
+    url.searchParams.delete("size");
+    location.replace(url);
+
+    e.preventDefault();
+  });
+}
+
 Post.view_original = function(e = null) {
   if (Utility.test_max_width(660)) {
     // Do the default behavior (navigate to image)

app/views/posts/index.html.erb

@@ -75,13 +75,13 @@
       <a class="mobile-only" href="#search-box">Search &raquo;</a>
     </li>
 
-    <%= render PopupMenuComponent.new(classes: "hidden") do |menu| %>
+    <%= render PopupMenuComponent.new(classes: "hidden post-preview-size-menu") do |menu| %>
       <% menu.button do %>
         <span class="text-sm">Size <%= caret_down_icon %></span>
       <% end %>
 
       <% menu.item do %>
-        <% if params.fetch(:size, PostPreviewComponent::DEFAULT_SIZE) == "150" %>
+        <% if @preview_size == "150" %>
           <%= link_to "Small", posts_path(tags: params[:tags], page: params[:page], limit: params[:limit], view: params[:view], size: "150"), class: "font-bold", rel: "nofollow" %>
         <% else %>
           <%= link_to "Small", posts_path(tags: params[:tags], page: params[:page], limit: params[:limit], view: params[:view], size: "150"), rel: "nofollow" %>
@@ -89,7 +89,7 @@
       <% end %>
 
       <% menu.item do %>
-        <% if params.fetch(:size, PostPreviewComponent::DEFAULT_SIZE) == "180" %>
+        <% if @preview_size == "180" %>
           <%= link_to "Medium", posts_path(tags: params[:tags], page: params[:page], limit: params[:limit], view: params[:view], size: "180"), class: "font-bold", rel: "nofollow" %>
         <% else %>
           <%= link_to "Medium", posts_path(tags: params[:tags], page: params[:page], limit: params[:limit], view: params[:view], size: "180"), rel: "nofollow" %>
@@ -97,7 +97,7 @@
       <% end %>
 
       <% menu.item do %>
-        <% if params.fetch(:size, PostPreviewComponent::DEFAULT_SIZE) == "225" %>
+        <% if @preview_size == "225" %>
           <%= link_to "Large", posts_path(tags: params[:tags], page: params[:page], limit: params[:limit], view: params[:view], size: "225"), class: "font-bold", rel: "nofollow" %>
         <% else %>
           <%= link_to "Large", posts_path(tags: params[:tags], page: params[:page], limit: params[:limit], view: params[:view], size: "225"), rel: "nofollow" %>
@@ -106,7 +106,7 @@
 
       <%# Mobile only %>
       <% menu.item do %>
-        <% if params.fetch(:size, PostPreviewComponent::DEFAULT_SIZE) == "360" %>
+        <% if @preview_size == "360" %>
           <%= link_to "Huge", posts_path(tags: params[:tags], page: params[:page], limit: params[:limit], view: params[:view], size: "360"), class: "mobile-only font-bold", rel: "nofollow" %>
         <% else %>
           <%= link_to "Huge", posts_path(tags: params[:tags], page: params[:page], limit: params[:limit], view: params[:view], size: "360"), class: "mobile-only", rel: "nofollow" %>
@@ -115,7 +115,7 @@
 
       <%# Desktop only %>
       <% menu.item do %>
-        <% if params.fetch(:size, PostPreviewComponent::DEFAULT_SIZE) == "270" %>
+        <% if @preview_size == "270" %>
           <%= link_to "Huge", posts_path(tags: params[:tags], page: params[:page], limit: params[:limit], view: params[:view], size: "270"), class: "desktop-only font-bold", rel: "nofollow" %>
         <% else %>
           <%= link_to "Huge", posts_path(tags: params[:tags], page: params[:page], limit: params[:limit], view: params[:view], size: "270"), class: "desktop-only", rel: "nofollow" %>
@@ -124,7 +124,7 @@
 
       <%# Desktop only %>
       <% menu.item do %>
-        <% if params.fetch(:size, PostPreviewComponent::DEFAULT_SIZE) == "360" %>
+        <% if @preview_size == "360" %>
           <%= link_to "Gigantic", posts_path(tags: params[:tags], page: params[:page], limit: params[:limit], view: params[:view], size: "360"), class: "desktop-only font-bold", rel: "nofollow" %>
         <% else %>
           <%= link_to "Gigantic", posts_path(tags: params[:tags], page: params[:page], limit: params[:limit], view: params[:view], size: "360"), class: "desktop-only", rel: "nofollow" %>
@@ -226,7 +226,7 @@
     <% if @post_set.shown_posts.empty? %>
       <%= render "post_sets/blank" %>
     <% else %>
-      <%= render_post_gallery(@post_set.posts, show_deleted: @post_set.show_deleted?, tags: @post_set.tag_string, show_votes: @post_set.show_votes?, size: params[:size]) do |gallery, posts| %>
+      <%= render_post_gallery(@post_set.posts, show_deleted: @post_set.show_deleted?, tags: @post_set.tag_string, show_votes: @post_set.show_votes?, size: @preview_size) do |gallery, posts| %>
         <% gallery.footer do %>
           <% if @post_set.hidden_posts.present? %>
             <div class="fineprint hidden-posts-notice">

app/views/posts/partials/common/_search.html.erb

@@ -9,6 +9,9 @@
     <% if params[:view] %>
       <%= hidden_field_tag :view, params[:view] %>
     <% end %>
+    <% if params[:size] %>
+      <%= hidden_field_tag :size, params[:size] %>
+    <% end %>
     <%= text_field_tag("tags", tags, :id => tags_dom_id, :class => "flex-auto", :"data-shortcut" => "q", :"data-autocomplete" => "tag-query") %>
     <button id="search-box-submit" type="submit"><%= search_icon %></button>
   <% end %>

app/views/posts/update.js.erb

@@ -1,6 +1,6 @@
 <% if @post.valid? %>
   var $post = $("#post_<%= @post.id %>");
-  var $new_post = $("<%= j post_preview(@post, fit: :compact, show_deleted: true, show_votes: params[:view] == "score", size: params[:size]) %>");
+  var $new_post = $("<%= j post_preview(@post, fit: :compact, show_deleted: true, show_votes: params[:view] == "score", size: @preview_size) %>");
   Danbooru.Blacklist.apply_post($new_post.get(0));
   $("#post_<%= @post.id %>").replaceWith($new_post);
   <% if params[:mode] == "quick-edit" %>