From fa08f2f8b98265bb01193f47dacf5e7c3e44fcc9 Mon Sep 17 00:00:00 2001
From: Oleh Omelchenko <ptrvtch@protonmail.com>
Date: Sat, 25 Jan 2025 19:59:37 +0200
Subject: [PATCH] feat: improve comment modal UI and streamline event listener
 setup in UIManager

---
 index.html       |  2 +-
 src/UIManager.js | 42 ++++++++++++++++++++++++------------------
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index 2ed4c18..07308b9 100644
--- a/index.html
+++ b/index.html
@@ -64,8 +64,8 @@
     </div>
     <div id="comment-modal-background" class="comment-modal-background"></div>
     <div id="comment-modal" class="comment-modal">
+        <h2>Comment Content Editor</h2>
         <textarea id="comment-textarea" placeholder="Add your comment here..."></textarea>
-        <button class="button" id="comment-modal-save">Save</button>
     </div>
     <script type="module" src="src/main.js"></script>
 </body>
diff --git a/src/UIManager.js b/src/UIManager.js
index 1e94089..e6a4e6a 100644
--- a/src/UIManager.js
+++ b/src/UIManager.js
@@ -5,16 +5,22 @@ export class UIManager {
     }
 
     setupEventListeners() {
-        document.getElementById('new-snippet').onclick = () => this.snippetManager.createNewSnippet();
-        document.getElementById('save-snippet').onclick = () => this.snippetManager.saveCurrentSnippet();
-        document.getElementById('version-switch').onclick = () => {
+        this.setupEventListener('new-snippet', 'onclick', () => this.snippetManager.createNewSnippet());
+        this.setupEventListener('save-snippet', 'onclick', () => this.snippetManager.saveCurrentSnippet());
+        this.setupEventListener('version-switch', 'onclick', () => {
             this.snippetManager.loadSnippet(this.snippetManager.currentSnippetId, !this.snippetManager.isDraftVersion);
-        };
-        document.getElementById('export-snippets').onclick = () => this.snippetManager.storageManager.exportSnippets();
-        document.getElementById('import-snippets').onclick = () => document.getElementById('import-file').click();
-        document.getElementById('import-file').onchange = (e) => this.handleImport(e);
-        document.getElementById('comment-modal-save').onclick = () => this.saveComment();
-        document.getElementById('comment-modal-background').onclick = () => this.closeCommentModal();
+        });
+        this.setupEventListener('export-snippets', 'onclick', () => this.snippetManager.storageManager.exportSnippets());
+        this.setupEventListener('import-snippets', 'onclick', () => document.getElementById('import-file').click());
+        this.setupEventListener('import-file', 'onchange', (e) => this.handleImport(e));
+        this.setupEventListener('comment-modal-background', 'onclick', () => this.closeCommentModal());
+    }
+
+    setupEventListener(elementId, event, handler) {
+        const element = document.getElementById(elementId);
+        if (element) {
+            element[event] = handler;
+        }
     }
 
     async handleImport(e) {
@@ -44,10 +50,10 @@ export class UIManager {
             const div = document.createElement('div');
             div.className = `snippet-item ${snippet.id === currentSnippetId ? 'active' : ''}`;
             div.onclick = () => this.snippetManager.loadSnippet(snippet.id);
-            
+
             const hasChanges = this.snippetManager.hasDraftChanges(snippet.id);
             const indicator = hasChanges ? '🟡' : '🟢';
-            
+
             const contentDiv = document.createElement('div');
             contentDiv.className = 'snippet-content';
             contentDiv.textContent = `${indicator} ${snippet.name}`;
@@ -71,16 +77,16 @@ export class UIManager {
                 this.snippetManager.renameSnippet(snippet.id);
             }));
 
-            buttonsDiv.appendChild(this.createButton('❌', 'delete-snippet', (e) => {
-                e.stopPropagation();
-                this.snippetManager.deleteSnippet(snippet.id);
-            }));
-
             buttonsDiv.appendChild(this.createButton('📄', 'duplicate-snippet', (e) => {
                 e.stopPropagation();
                 this.snippetManager.duplicateSnippet(snippet.id);
             }));
 
+            buttonsDiv.appendChild(this.createButton('❌', 'delete-snippet', (e) => {
+                e.stopPropagation();
+                this.snippetManager.deleteSnippet(snippet.id);
+            }));
+
             div.appendChild(buttonsDiv);
             container.appendChild(div);
         });
@@ -137,8 +143,8 @@ export class UIManager {
         if (!versionSwitch) return;
 
         versionSwitch.style.display = hasDraftChanges ? 'block' : 'none';
-        versionSwitch.textContent = isDraftVersion ? 
-            'View Saved' : 
+        versionSwitch.textContent = isDraftVersion ?
+            'View Saved' :
             'View Draft';
     }
 }