diff --git a/src/SnippetManager.js b/src/SnippetManager.js index 3b63ef2..074099b 100644 --- a/src/SnippetManager.js +++ b/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); + } + } } \ No newline at end of file diff --git a/src/UIManager.js b/src/UIManager.js index 80adf93..497cc8a 100644 --- a/src/UIManager.js +++ b/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); }); } diff --git a/src/styles.css b/src/styles.css index 7b80a91..6be5b3a 100644 --- a/src/styles.css +++ b/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; } \ No newline at end of file