Update templates/home.html

templates/home.html

@@ -302,6 +302,14 @@
         #description-editor-container .ql-snow .ql-fill {
             fill: rgba(255, 255, 255, 0.7);
         }
+
+        .word-counter {
+            margin-top: 0.25rem;
+            font-size: 0.75rem;
+            color: rgba(255, 255, 255, 0.6);
+            text-align: right;
+            font-weight: 400;
+        }
         .modal-buttons {
             display: flex;
             gap: 0.75rem;
@@ -572,6 +580,7 @@
                     <label class="form-label" for="description">Description</label>
                     <textarea id="description" class="form-textarea" placeholder="Enter payment description" required></textarea>
                     <div id="description-editor-container"></div>
+                    <div id="word-counter" class="word-counter">0 words</div>
                 </div>
 
                 <div class="form-group">
@@ -698,11 +707,7 @@
                 modules: {
                     toolbar: [
                         [{ 'header': [1, 2, 3, false] }],
-                        ['bold', 'italic', 'underline', 'strike'],
-                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
-                        ['blockquote', 'code-block'],
-                        ['link', 'image'],
-                        ['clean']
+                        ['bold', 'italic', 'underline']
                     ]
                 }
             });
@@ -712,6 +717,19 @@
                 quillContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';
                 quillContainer.style.borderColor = 'rgba(255, 255, 255, 0.1)';
             }
+
+            function updateWordCount() {
+                if (!descriptionEditor) return;
+                const text = descriptionEditor.getText();
+                const words = text.trim() === '' ? 0 : text.trim().split(/\s+/).length;
+                const counter = document.getElementById('word-counter');
+                if (counter) {
+                    counter.textContent = words + ' word' + (words !== 1 ? 's' : '');
+                }
+            }
+
+            descriptionEditor.on('text-change', updateWordCount);
+            updateWordCount();
         }
         
         function getQuillMarkdown() {
@@ -826,6 +844,10 @@
                 container.innerHTML = '';
                 descriptionEditor = null;
             }
+            const counter = document.getElementById('word-counter');
+            if (counter) {
+                counter.textContent = '0 words';
+            }
             const textarea = document.getElementById('description');
             textarea.value = '';
             textarea.style.display = 'block';