feat: add snippet renaming functionality and enhance UI with edit button

src/SnippetManager.js

@@ -167,4 +167,16 @@ export class SnippetManager {
             this.uiManager.renderSnippetList(this.snippets, this.currentSnippetId);
         }
     }
+
+    renameSnippet(id) {
+        const snippet = this.snippets.find(s => s.id === id);
+        if (!snippet) return;
+
+        const newName = prompt('Enter new name:', snippet.name);
+        if (newName && newName.trim() !== '') {
+            snippet.name = newName.trim();
+            this.storageManager.saveSnippets(this.snippets);
+            this.uiManager.renderSnippetList(this.snippets, this.currentSnippetId);
+        }
+    }
 }

src/UIManager.js

@@ -29,6 +29,18 @@ export class UIManager {
             contentDiv.textContent = `${indicator} ${snippet.name}`;
             div.appendChild(contentDiv);
 
+            const buttonsDiv = document.createElement('div');
+            buttonsDiv.className = 'snippet-buttons';
+
+            const editButton = document.createElement('button');
+            editButton.className = 'edit-snippet';
+            editButton.innerHTML = '✏️';
+            editButton.onclick = (e) => {
+                e.stopPropagation();
+                this.snippetManager.renameSnippet(snippet.id);
+            };
+            buttonsDiv.appendChild(editButton);
+
             const deleteButton = document.createElement('button');
             deleteButton.className = 'delete-snippet';
             deleteButton.innerHTML = '❌';
@@ -36,8 +48,9 @@ export class UIManager {
                 e.stopPropagation();
                 this.snippetManager.deleteSnippet(snippet.id);
             };
-            div.appendChild(deleteButton);
+            buttonsDiv.appendChild(deleteButton);
             
+            div.appendChild(buttonsDiv);
             container.appendChild(div);
         });
     }

src/styles.css

@@ -145,4 +145,27 @@
 
 .snippet-item:hover .delete-snippet {
     opacity: 0.8;
+}
+
+.snippet-buttons {
+    display: flex;
+    gap: 4px;
+}
+
+.edit-snippet {
+    opacity: 0.4;
+    font-size: 14px;
+    padding: 2px 4px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    min-width: 24px;
+}
+
+.edit-snippet:hover {
+    opacity: 1;
+}
+
+.snippet-item:hover .edit-snippet {
+    opacity: 0.8;
 }