always show comment icon on cards: bubble+ to add the first comment, placed in native comment slot; v0.3.1

Asset/js/relocate.js

@@ -1,17 +1,23 @@
 /*
- * OrganonTweaks -- place the "Remove this Column" entry inside the native column menu.
+ * OrganonTweaks -- move plugin-injected DOM bits into their native positions on the board.
  *
- * Kanboard only exposes the template:board:column:dropdown hook AFTER the column menu
- * <ul>, and its dropdown JS clones just that <ul> when the menu opens. So the hook item
- * cannot reach the menu on its own. column_dropdown.php renders the item hidden next to
- * the menu; this script moves each such item into that column's real <ul> so it appears
- * alongside the native entries. It re-runs when the board is redrawn (AJAX polling /
- * drag-and-drop refresh).
+ * Both fixes are needed because Kanboard's relevant hooks render at the END of their
+ * container, not where the item belongs:
+ *
+ * 1. "Remove this Column": the template:board:column:dropdown hook renders AFTER the column
+ *    menu <ul> (and the dropdown JS clones only that <ul>), so we move the hidden <li> into
+ *    the column's real <ul>.
+ * 2. "Always show comment icon": the template:board:task:icons hook renders at the end of
+ *    the card icons row, so the "+" bubble lands after priority instead of in the native
+ *    comment slot. We move it just before the description icon (where the native comment
+ *    icon sits), so the order matches whether or not the card has comments.
+ *
+ * Both re-run when the board is redrawn (AJAX polling / drag-and-drop refresh).
  */
 (function () {
     "use strict";
 
-    function relocate() {
+    function relocateColumnMenuItems() {
         var items = document.querySelectorAll(".organontweaks-remove-column-item");
 
         for (var i = 0; i < items.length; i++) {
@@ -34,17 +40,53 @@
         }
     }
 
+    function repositionCommentIcons() {
+        var items = document.querySelectorAll(".organontweaks-comment-add");
+
+        for (var i = 0; i < items.length; i++) {
+            var item = items[i];
+            var row = item.parentNode;
+
+            if (!row) {
+                continue;
+            }
+
+            // Native comment icon sits just before the description icon; if there is no
+            // description, before the age / closed block. That is the slot we move into.
+            var anchor = null;
+            var descIcon = row.querySelector("i.fa-file-text-o");
+
+            if (descIcon) {
+                anchor = descIcon.closest("a");
+            }
+
+            if (!anchor) {
+                anchor = row.querySelector(".task-icon-age") || row.querySelector(".task-board-closed");
+            }
+
+            // Move only if needed (keeps the MutationObserver from looping).
+            if (anchor && anchor.parentNode === row && item.nextElementSibling !== anchor) {
+                row.insertBefore(item, anchor);
+            }
+        }
+    }
+
+    function apply() {
+        relocateColumnMenuItems();
+        repositionCommentIcons();
+    }
+
     function init() {
         if (!document.getElementById("board")) {
             return;
         }
 
-        relocate();
+        apply();
 
         var container = document.getElementById("board-container");
 
         if (container && window.MutationObserver) {
-            new MutationObserver(relocate).observe(container, { childList: true, subtree: true });
+            new MutationObserver(apply).observe(container, { childList: true, subtree: true });
         }
     }