feat: enhance comment button visibility and interaction in UIManager

src/UIManager.js

@@ -57,6 +57,15 @@ export class UIManager {
             const buttonsDiv = document.createElement('div');
             buttonsDiv.className = 'snippet-buttons';
 
+            const commentButton = this.createButton('💬', 'comment-snippet', (e) => {
+                e.stopPropagation();
+                this.openCommentModal(snippet.id);
+            });
+            if (snippet.comment && snippet.comment.trim() !== '') {
+                commentButton.classList.add('has-comment');
+            }
+            buttonsDiv.appendChild(commentButton);
+
             buttonsDiv.appendChild(this.createButton('✏️', 'edit-snippet', (e) => {
                 e.stopPropagation();
                 this.snippetManager.renameSnippet(snippet.id);
@@ -72,15 +81,6 @@ export class UIManager {
                 this.snippetManager.duplicateSnippet(snippet.id);
             }));
 
-            const commentButton = this.createButton('💬', 'comment-snippet', (e) => {
-                e.stopPropagation();
-                this.openCommentModal(snippet.id);
-            });
-            if (snippet.comment && snippet.comment.trim() !== '') {
-                commentButton.classList.add('has-comment');
-            }
-            buttonsDiv.appendChild(commentButton);
-            
             div.appendChild(buttonsDiv);
             container.appendChild(div);
         });

src/styles.css

@@ -210,22 +210,44 @@
     white-space: nowrap;
 }
 
-.delete-snippet {
+.delete-snippet,
-    opacity: 0.4;
+.edit-snippet,
+.duplicate-snippet,
+.comment-snippet {
+    opacity: 0.2;
     font-size: 14px;
     padding: 2px 4px;
     background: none;
     border: none;
     cursor: pointer;
     min-width: 24px;
+    transition: opacity 0.2s;
 }
 
-.delete-snippet:hover {
+.snippet-item:hover .delete-snippet,
+.snippet-item:hover .edit-snippet,
+.snippet-item:hover .duplicate-snippet,
+.snippet-item:hover .comment-snippet {
+    opacity: 0.6;
+}
+
+.snippet-item.active .delete-snippet,
+.snippet-item.active .edit-snippet,
+.snippet-item.active .duplicate-snippet,
+.snippet-item.active .comment-snippet {
     opacity: 1;
 }
 
-.snippet-item:hover .delete-snippet {
+.comment-snippet.has-comment {
-    opacity: 0.8;
+    opacity: 0.4;
+}
+
+.snippet-item:hover .comment-snippet.has-comment {
+    opacity: 0.6;
+}
+
+.snippet-item.active .comment-snippet.has-comment {
+    opacity: 1;
 }
 
 .snippet-buttons {
@@ -233,42 +255,6 @@
     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;
-}
-
-.duplicate-snippet {
-    opacity: 0.4;
-    font-size: 14px;
-    padding: 2px 4px;
-    background: none;
-    border: none;
-    cursor: pointer;
-    min-width: 24px;
-}
-
-.duplicate-snippet:hover {
-    opacity: 1;
-}
-
-.snippet-item:hover .duplicate-snippet {
-    opacity: 0.8;
-}
-
 .comment-modal {
     display: none;
     position: fixed;
@@ -308,16 +294,27 @@
 }
 
 .comment-snippet {
-    opacity: 0.4;
+    opacity: 0;
     font-size: 14px;
     padding: 2px 4px;
     background: none;
     border: none;
     cursor: pointer;
     min-width: 24px;
+    transition: opacity 0.2s;
 }
 
 .comment-snippet.has-comment {
+    opacity: 0.4;
+}
+
+.snippet-item:hover .comment-snippet,
+.snippet-item.active .comment-snippet {
+    opacity: 0.4;
+}
+
+.snippet-item:hover .comment-snippet.has-comment,
+.snippet-item.active .comment-snippet.has-comment {
     opacity: 1;
 }