From a2b472f2d8ef10ee02fafef82d2a052920b4ad5f Mon Sep 17 00:00:00 2001
From: maxpozdeev <maxpozdeev@gmail.com>
Date: Sun, 16 Feb 2025 00:27:50 +0300
Subject: [PATCH] + Show counters of new tasks in the Select List menu

---
 src/content/mytinytodo.js   | 21 +++++++++++++--------
 src/content/theme/style.css |  9 +++++++++
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/content/mytinytodo.js b/src/content/mytinytodo.js
index b21ad0c..bc1b958 100644
--- a/src/content/mytinytodo.js
+++ b/src/content/mytinytodo.js
@@ -724,7 +724,7 @@ var mytinytodo = window.mytinytodo = _mtt = {
         }
 
         // Counter
-        if (this.options.newTaskCounter) {
+        if (this.options.newTaskCounter /* TODO: && !flag.readOnly */) {
             this.addAction('listsLoaded', newTaskCounterStart);
             this.addAction('listSelected', newTaskCounterOnListSelected)
             if (this.options.newTaskCounterIcon) {
@@ -2613,16 +2613,18 @@ function escapeHtml(str) {
 
 function slmenuOnListsLoaded()
 {
-    if(_mtt.menus.selectlist) {
+    if (_mtt.menus.selectlist) {
         _mtt.menus.selectlist.destroy();
         _mtt.menus.selectlist = null;
     }
 
-    var s = '';
-    var all = tabLists.getAll();
-    for(var i in all) {
-        s += '<li id="slmenu_list:'+all[i].id+'" class="'+(all[i].id==curList.id?'mtt-item-checked':'')+' list-id-'+all[i].id+(all[i].hidden?' mtt-list-hidden':'')+'"><div class="menu-icon"></div><a href="'+ _mtt.urlForList(all[i])+ '">'+all[i].name+'</a></li>';
-    }
+    let s = '';
+    tabLists.getAll().forEach( (list) => {
+        const classChecked = (list.id == curList.id) ? 'mtt-item-checked' : '';
+        const classHidden = list.hidden ? 'mtt-list-hidden' : '';   
+        s += `<li id="slmenu_list:${list.id}" class="list-id-${list.id} ${classChecked} ${classHidden}">
+            <div class="menu-icon"></div><a href="${_mtt.urlForList(list)}">${list.name}</a><div class="counter hidden"></div></li>`;
+    })
     $('#slmenucontainer ul>.slmenu-lists-begin').nextAll().remove();
     $('#slmenucontainer ul>.slmenu-lists-begin').after(s);
 };
@@ -2638,7 +2640,8 @@ function slmenuOnListAdded(list)
         _mtt.menus.selectlist.destroy();
         _mtt.menus.selectlist = null;
     }
-    $('#slmenucontainer ul').append('<li id="slmenu_list:'+list.id+'" class="list-id-'+list.id+'"><div class="menu-icon"></div><a href="'+ _mtt.urlForList(list)+ '">'+list.name+'</a></li>');
+    $('#slmenucontainer ul').append(`<li id="slmenu_list:${list.id}" class="list-id-${list.id}">
+        <div class="menu-icon"></div><a href="${_mtt.urlForList(list)}">${list.name}</a><div class="counter hidden"></div></li>`);
 };
 
 function slmenuOnListSelected(a)
@@ -2795,9 +2798,11 @@ function setNewTaskCounterForList(listId, counter)
     }
     if (counter > 0) {
         $('#list_' + listId).find('.counter').text(counter).removeClass('hidden');
+        $('#slmenucontainer li.list-id-' + listId).find('.counter').text(counter).removeClass('hidden');
         list.newTaskCounter = counter;
     } else {
         $('#list_' + listId).find('.counter').text('').addClass('hidden');
+        $('#slmenucontainer li.list-id-' + listId).find('.counter').text('').addClass('hidden');
         list.newTaskCounter = 0;
     }
 }
diff --git a/src/content/theme/style.css b/src/content/theme/style.css
index 3954049..3ddd61b 100644
--- a/src/content/theme/style.css
+++ b/src/content/theme/style.css
@@ -1143,6 +1143,15 @@ li.mtt-menu-indicator .submenu-icon {
   mask: var(--svg-arr-right) no-repeat; -webkit-mask: var(--svg-arr-right) no-repeat;
   background-color: var(--color-btn-default);
 }
+.mtt-menu-container .counter {
+  position:absolute; right:6px; top:50%; margin-top:-8px;
+  height: 16px; min-width:16px; 
+  border-radius: 1rem;
+  font-size: 0.8rem;
+  text-align: center;
+  background-color: #686868; /* #de5141 */
+  color: white;
+}
 li.mtt-item-hidden { display:none; }
 
 #slmenucontainer li.mtt-list-hidden a { font-style:italic; }