Show pencil on hover editable content

Author: noracato

app/components/collections/title/component.html.erb

@@ -0,0 +1,19 @@
+<span contenteditable="<%= @editable %>"
+      class="relative peer <%= css_classes %>"
+      data-controller="editable-title"
+      data-editable-title-url-value="<%= @path %>"
+      data-action="<%= actions %>"
+  >
+  <%= @title %>
+</span>
+<% if @editable %>
+  <span class="
+    inline-block
+    ml-2
+    invisible
+    peer-focus:invisible!
+    peer-hover:visible"
+  >
+    <%= heroicon 'pencil', options: { class: 'w-4 h-4 text-midnight-800' } %>
+  </span>
+<% end %>

app/components/collections/title/component.rb

@@ -0,0 +1,26 @@
+module Collections::Title
+  class Component < ApplicationComponent
+    include ButtonHelper
+
+    option :path
+    option :title
+    option :editable
+
+    def css_classes
+      if @editable
+        'hover:underline
+        focus:outline-none
+        focus:border
+        focus:rounded-md
+        focus:px-2'
+      end
+    end
+
+    def actions
+      if @editable
+        'blur->editable-title#update
+        keydown.enter->editable-title#update'
+      end
+    end
+  end
+end

app/views/collections/show.html.erb

@@ -1,11 +1,9 @@
 <%- content_for :menu_title do %>
-  <span contenteditable="<%= @editable %>"
-        class="relative <%= 'hover:underline hover:decoration-gray-400 hover:decoration-1 focus:outline-none' if can?(:update, @collection) %>"
-        data-controller="editable-title"
-        data-editable-title-url-value="<%= collection_path(@collection) %>"
-        data-action="<%= 'blur->editable-title#update keydown.enter->editable-title#update' if can?(:update, @collection) %>">
-    <%= @collection.title %>
-  </span>
+  <%= render(Collections::Title::Component.new(
+    path: collection_path(@collection),
+    title: @collection.title,
+    editable: @editable
+  ))%>
 <% end %>
 <%- content_for :title, "#{@collection.title} - #{t('collections.title')} - #{t('meta.title')}" %>
 <%= render(partial: "collections/show/block_right_menu", locals: { collection: @collection })%>