Refactor: Show rename icon on hover instead of click on name

Changed category rename behavior - clicking name now expands/collapses,
pencil icon appears on hover for renaming.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

myproject/products/static/products/js/catalog.js

@@ -13,8 +13,8 @@ document.addEventListener('DOMContentLoaded', function() {
     // ========================================
     document.querySelectorAll('.category-header').forEach(header => {
         header.addEventListener('click', function(e) {
-            // Игнорируем клик по редактируемому полю
+            // Игнорируем клик по кнопке переименования и полю ввода
-            if (e.target.classList.contains('category-name-editable') ||
+            if (e.target.classList.contains('category-rename-btn') ||
                 e.target.classList.contains('category-name-input')) {
                 return;
             }
@@ -120,17 +120,20 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 
     // ========================================
-    // Inline-редактирование названий категорий
+    // Inline-редактирование названий категорий (через иконку карандаша)
     // ========================================
-    document.querySelectorAll('.category-name-editable').forEach(nameSpan => {
+    document.querySelectorAll('.category-rename-btn').forEach(btn => {
-        nameSpan.addEventListener('click', function(e) {
+        btn.addEventListener('click', function(e) {
             e.stopPropagation();
 
-            // Уже редактируется?
-            if (this.querySelector('input')) return;
-
             const categoryId = this.dataset.categoryId;
-            const currentName = this.textContent.trim();
+            const header = this.closest('.category-header');
+            const nameSpan = header.querySelector('.category-name');
+
+            // Уже редактируется?
+            if (nameSpan.querySelector('input')) return;
+
+            const currentName = nameSpan.textContent.trim();
 
             // Создаем input
             const input = document.createElement('input');
@@ -140,9 +143,9 @@ document.addEventListener('DOMContentLoaded', function() {
             input.style.cssText = 'width: 100%; border: 1px solid #0d6efd; border-radius: 3px; padding: 2px 6px; font-size: inherit; outline: none;';
 
             // Сохраняем оригинальный текст
-            this.dataset.originalName = currentName;
+            nameSpan.dataset.originalName = currentName;
-            this.textContent = '';
+            nameSpan.textContent = '';
-            this.appendChild(input);
+            nameSpan.appendChild(input);
             input.focus();
             input.select();
 
@@ -156,7 +159,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     return;
                 }
 
-                if (newName === this.dataset.originalName) {
+                if (newName === nameSpan.dataset.originalName) {
                     // Название не изменилось
                     cancelEdit();
                     return;
@@ -180,7 +183,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
                     if (data.success) {
                         // Успешно сохранено
-                        this.textContent = data.name;
+                        nameSpan.textContent = data.name;
                     } else {
                         // Ошибка
                         alert(data.error || 'Ошибка при сохранении');
@@ -195,7 +198,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
             // Функция отмены
             const cancelEdit = () => {
-                this.textContent = this.dataset.originalName;
+                nameSpan.textContent = nameSpan.dataset.originalName;
             };
 
             // Enter - сохранить

myproject/products/templates/products/catalog.html

@@ -118,16 +118,21 @@
     .catalog-list .catalog-item .card-body .mt-1 {
         margin-top: 0 !important;
     }
-    /* Inline-редактирование названий категорий */
+    /* Кнопка переименования категории */
-    .category-name-editable {
+    .category-rename-btn {
-        cursor: text;
+        opacity: 0;
+        cursor: pointer;
+        color: #6c757d;
+        font-size: 0.75rem;
         padding: 2px 4px;
-        margin: -2px -4px;
+        transition: opacity 0.2s, color 0.15s;
-        border-radius: 3px;
-        transition: background-color 0.15s;
     }
-    .category-name-editable:hover {
+    .category-header:hover .category-rename-btn {
-        background-color: #e7f1ff;
+        opacity: 0.5;
+    }
+    .category-rename-btn:hover {
+        opacity: 1 !important;
+        color: #0d6efd;
     }
 </style>
 {% endblock %}

myproject/products/templates/products/catalog_tree_node.html

@@ -10,12 +10,13 @@
             <i class="bi bi-dot text-muted"></i>
         {% endif %}
         <i class="bi bi-folder{% if node.children %}-fill text-warning{% else %}2 text-secondary{% endif %}"></i>
-        <span class="flex-grow-1 category-name-editable" data-category-id="{{ node.category.pk }}">{{ node.category.name }}</span>
+        <span class="flex-grow-1 category-name" data-category-id="{{ node.category.pk }}">{{ node.category.name }}</span>
         {% with products_count=node.category.products.count kits_count=node.category.kits.count %}
         {% if products_count or kits_count %}
             <span class="badge bg-light text-dark border" style="font-size: 0.7rem;">{{ products_count|add:kits_count }}</span>
         {% endif %}
         {% endwith %}
+        <i class="bi bi-pencil category-rename-btn" data-category-id="{{ node.category.pk }}" title="Переименовать"></i>
     </div>
 
     {% if node.children %}