Add image icon next to thumbnail size dropdown menu.

app/components/application_component.rb

@@ -2,7 +2,7 @@
 
 class ApplicationComponent < ViewComponent::Base
   delegate :link_to_user, :time_ago_in_words_tagged, :format_text, :external_link_to, :tag_class, :current_page_path, to: :helpers
-  delegate :edit_icon, :delete_icon, :undelete_icon, :flag_icon, :upvote_icon, :downvote_icon, :link_icon, :sticky_icon, :unsticky_icon, :hashtag_icon, :caret_down_icon, to: :helpers
+  delegate :edit_icon, :delete_icon, :undelete_icon, :flag_icon, :upvote_icon, :downvote_icon, :link_icon, :sticky_icon, :unsticky_icon, :hashtag_icon, :caret_down_icon, :image_icon, to: :helpers
 
   def policy(subject)
     Pundit.policy!(current_user, subject)

app/components/comment_component/comment_component.html.erb

@@ -42,7 +42,7 @@
       <%= render "application/update_notice", record: comment %>
     <% end %>
 
-    <menu>
+    <menu class="mt-2">
       <% if votable? %>
         <li class="comment-votes">
           <% if current_user.is_anonymous? %>

app/components/comment_component/comment_component.scss

@@ -43,9 +43,4 @@ article.comment {
       width: 1.25em;
     }
   }
-
-  .popup-menu {
-    width: 1.5em;
-    height: 1.5em;
-  }
 }

app/components/forum_post_component/forum_post_component.html.erb

@@ -15,7 +15,7 @@
     </div>
     <%= render "application/update_notice", record: forum_post %>
 
-    <menu>
+    <menu class="mt-2">
       <% if policy(forum_post).reply? %>
         <% if current_user.is_anonymous? %>
           <li><%= link_to "Reply", login_path(url: request.fullpath) %></li>

app/components/popup_menu_component/popup_menu_component.html.erb

@@ -1,5 +1,5 @@
-<div class="popup-menu <%= classes %>">
-  <a class="popup-menu-button" href="javascript:void(0)">
+<div class="popup-menu inline-block <%= classes %>">
+  <a class="popup-menu-button inline-block rounded p-1" href="javascript:void(0)">
     <% if button.present? %>
       <%= button %>
     <% else %>

app/components/popup_menu_component/popup_menu_component.scss

@@ -1,16 +1,7 @@
 @import "../../javascript/src/styles/base/000_vars";
 
 div.popup-menu {
-  display: inline-block;
-
   a.popup-menu-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    border-radius: 4px;
-    padding: 4px 8px;
     color: var(--muted-text-color);
 
     // the popup menu is open

app/components/preview_size_menu_component/preview_size_menu_component.html.erb

@@ -1,6 +1,6 @@
 <%= render PopupMenuComponent.new(classes: "preview-size-menu") do |menu| %>
   <% menu.button do %>
-    <span class="text-sm">Size <%= caret_down_icon %></span>
+    <%= image_icon %> <span class="text-sm">Size</span> <%= caret_down_icon(class: "text-xs") %>
   <% end %>
 
   <% menu.item do %>

app/helpers/icon_helper.rb

@@ -189,6 +189,10 @@ module IconHelper
     svg_icon_tag("table-icon", "M0 96C0 60.65 28.65 32 64 32H448C483.3 32 512 60.65 512 96V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V96zM64 160H128V96H64V160zM448 96H192V160H448V96zM64 288H128V224H64V288zM448 224H192V288H448V224zM64 416H128V352H64V416zM448 352H192V416H448V352z", viewbox: "0 0 512 512", **options)
   end
 
+  def image_icon(**options)
+    svg_icon_tag("image-icon", "M447.1 32h-384C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z", viewbox: "0 0 512 512", **options)
+  end
+
   def globe_icon(**options)
     icon_tag("fas fa-globe", **options)
   end

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

@@ -64,8 +64,6 @@
     div.popup-menu {
       grid-area: menu;
       align-self: center;
-      width: 28px;
-      height: 28px;
     }
   }
 

app/views/posts/index.html.erb

@@ -77,17 +77,19 @@
       <a class="mobile-only" href="#search-box">Search &raquo;</a>
     </li>
 
-    <%= render PreviewSizeMenuComponent.new(current_size: @preview_size) %>
+    <li class="flex items-center gap-2">
+      <%= render PreviewSizeMenuComponent.new(current_size: @preview_size) %>
 
-    <%= render PopupMenuComponent.new(classes: "post-preview-options-menu") do |menu| %>
-      <% menu.item do %>
-        <% if @post_set.show_votes %>
-          <%= link_to "Hide scores", posts_path(tags: params[:tags], page: params[:page], limit: params[:limit], show_votes: nil, size: params[:size]), class: "post-preview-hide-votes", rel: "nofollow" %>
-        <% else %>
-          <%= link_to "Show scores", posts_path(tags: params[:tags], page: params[:page], limit: params[:limit], show_votes: true, size: params[:size]), class: "post-preview-show-votes", rel: "nofollow" %>
+      <%= render PopupMenuComponent.new(classes: "post-preview-options-menu") do |menu| %>
+        <% menu.item do %>
+          <% if @post_set.show_votes %>
+            <%= link_to "Hide scores", posts_path(tags: params[:tags], page: params[:page], limit: params[:limit], show_votes: nil, size: params[:size]), class: "post-preview-hide-votes", rel: "nofollow" %>
+          <% else %>
+            <%= link_to "Show scores", posts_path(tags: params[:tags], page: params[:page], limit: params[:limit], show_votes: true, size: params[:size]), class: "post-preview-show-votes", rel: "nofollow" %>
+          <% end %>
         <% end %>
       <% end %>
-    <% end %>
+    </li>
   </menu>
 
   <div id="quick-edit-div" style="display: none;">