adjust folder form

app/javascript/elements/toggle_visible.js

@@ -7,5 +7,9 @@ export default actionable(class extends HTMLElement {
     elementIds.forEach((elementId) => {
       document.getElementById(elementId).classList.toggle('hidden', (event.target.dataset.toggleId || event.target.value) !== elementId)
     })
+
+    if (this.dataset.focusId) {
+      document.getElementById(this.dataset.focusId)?.focus()
+    }
   }
 })

app/views/templates_folders/edit.html.erb

@@ -3,27 +3,23 @@
   <% if with_subfolder %>
     <%= form_for '', url: template_folder_path(@template), method: :put, data: { turbo_frame: :_top }, html: { id: 'subfolder_form', autocomplete: :off } do |f| %>
       <%= f.hidden_field :parent_name, value: @template.folder.parent_folder&.name || @template.folder.name %>
-      <toggle-visible data-element-ids="<%= %w[folder_form subfolder_form].to_json %>" class="block relative">
+      <toggle-visible data-element-ids="<%= %w[folder_form subfolder_form].to_json %>" class="block relative" data-focus-id="name">
         <div class="flex items-center justify-between mb-2.5">
-          <label for="is_root_folder" class="flex items-center">
+          <label for="is_root_folder" class="flex items-center tooltip tooltip-right pr-2 group" data-tip="<%= t('change_parent_folder') %>">
             <%= check_box_tag :is_root_folder, 'folder_form', data: { action: 'change:toggle-visible#trigger' }, class: 'hidden' %>
-            <span class="flex items-center space-x-0.5 mt-1 peer">
+            <span class="flex items-center mt-1">
-              <%= svg_icon('folder', class: 'w-6 h-5 flex-shrink-0') %>
+              <%= svg_icon('folder', class: 'w-5 h-5 flex-shrink-0 group-hover:hidden mr-1') %>
+              <%= svg_icon('folder_share', class: 'w-5 h-5 flex-shrink-0 hidden group-hover:inline mr-1') %>
               <span class="text-md">
                 <%= @template.folder.parent_folder&.name || @template.folder.name %>
               </span>
             </span>
-            <span class="pl-1 tooltip tooltip-right md:opacity-0 hover:opacity-100 peer-hover:opacity-100" data-tip="<%= t('change_parent_folder') %>">
-              <span href="<%= edit_template_folder_path(@template.id) %>" data-turbo-frame="modal">
-                <%= svg_icon('pencil', class: 'w-5 h-5') %>
-              </span>
-            </span>
           </label>
         </div>
       </toggle-visible>
       <div class="form-control mb-6">
         <folder-autocomplete class="block" data-submit-on-select="true" data-parent-name="<%= @template.folder.parent_folder&.name || @template.folder.name %>" data-enabled="<%= params[:autocomplete] != 'false' %>">
-          <%= f.text_field :name, required: true, placeholder: "#{t('new_subfolder_name')}...", class: 'base-input w-full', autofocus: true %>
+          <%= f.text_field :name, required: true, placeholder: "#{t('new_subfolder_name')}...", class: 'base-input w-full', autofocus: true, id: 'subfolder_name' %>
         </folder-autocomplete>
       </div>
       <div class="form-control">