Move comments counter badge markup to base SidePanelToggle component

client/src/entrypoints/admin/comments.js

@@ -312,16 +312,10 @@ window.comments = (() => {
     });
 
     // Keep number of comments up to date with comment app
-    const commentToggle = document.querySelector(
-      '[data-side-panel-toggle="comments"]',
+    const commentCounter = document.querySelector(
+      '[data-side-panel-toggle="comments"] [data-side-panel-toggle-counter]',
     );
 
-    const commentCounter = document.createElement('div');
-    commentCounter.className =
-      '-w-mr-3 w-py-0.5 w-px-[0.325rem] w-translate-y-[-8px] rtl:w-translate-x-[4px] w-translate-x-[-4px] w-text-[0.5625rem] w-font-bold w-bg-surface-button-default w-text-text-button w-border w-border-surface-page w-rounded-[1rem]';
-
-    commentToggle.appendChild(commentCounter);
-
     const updateCommentCount = () => {
       const commentCount = commentApp.selectors.selectCommentCount(
         commentApp.store.getState(),
@@ -334,6 +328,7 @@ window.comments = (() => {
 
       if (commentCount > 0) {
         commentCounter.innerText = commentCount.toString();
+        commentCounter.hidden = false;
       } else {
         // Note: Hide the circle when its content is empty
         commentCounter.hidden = true;

wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html

@@ -1,6 +1,7 @@
 {% load wagtailadmin_tags i18n %}
 {% fragment as nav_icon_classes %}w-w-4 w-h-4 group-hover:w-transform group-hover:w-scale-110{% endfragment %}
-{% fragment as nav_icon_button_classes %}w-w-slim-header w-h-slim-header w-bg-transparent w-border-transparent w-box-border w-py-3 w-px-3 w-flex w-justify-center w-items-center w-outline-offset-inside w-text-text-meta w-transition w-group hover:w-text-text-label focus:w-text-text-label expanded:w-text-text-label expanded:w-border-y-2 expanded:w-border-b-current{% endfragment %}
+{% fragment as nav_icon_button_classes %}w-w-slim-header w-h-slim-header w-bg-transparent w-border-transparent w-box-border w-py-3 w-px-3 w-flex w-justify-center w-items-center w-outline-offset-inside w-text-text-meta w-transition w-group hover:w-text-text-label focus:w-text-text-label expanded:w-text-text-label expanded:w-border-y-2 expanded:w-border-b-current w-shrink-0{% endfragment %}
+{% fragment as nav_icon_counter_classes %}-w-mr-3 w-py-0.5 w-px-[0.325rem] w-translate-y-[-8px] rtl:w-translate-x-[4px] w-translate-x-[-4px] w-text-[0.5625rem] w-font-bold w-text-text-button w-border w-border-surface-page w-rounded-[1rem]{% endfragment %}
 {# Z index 99 to ensure header is always above  #}
 <header class="w-slim-header w-flex w-flex-col sm:w-flex-row w-items-center w-justify-between w-bg-surface-header w-border-b w-border-border-furniture w-px-0 w-py-0 w-mb-0 w-relative w-top-0 w-z-header sm:w-sticky w-min-h-slim-header">
 

wagtail/admin/templates/wagtailadmin/shared/side_panel_toggle.html

@@ -10,4 +10,9 @@
     aria-expanded="false"
 >
     {% icon name=toggle.icon_name classname=nav_icon_classes %}
+    {% if toggle.has_counter %}
+        <div data-side-panel-toggle-counter class="{{ nav_icon_counter_classes }} {{ toggle.counter_classname|default:'w-bg-surface-button-default'}}" {% if not count %}hidden{% endif %}>
+            {{ count }}
+        </div>
+    {% endif %}
 </button>

wagtail/admin/ui/side_panels.py

@@ -14,6 +14,8 @@ class BaseSidePanel(Component):
         template_name = "wagtailadmin/shared/side_panel_toggle.html"
         aria_label = ""
         icon_name = ""
+        has_counter = True
+        counter_classname = ""
 
         def __init__(self, panel):
             self.panel = panel
@@ -23,10 +25,12 @@ class BaseSidePanel(Component):
             inherit = {
                 "nav_icon_button_classes",
                 "nav_icon_classes",
+                "nav_icon_counter_classes",
             }
             context = {key: parent_context.get(key) for key in inherit}
             context["toggle"] = self
             context["panel"] = self.panel
+            context["count"] = 0
             return context
 
     def __init__(self, object, request):
@@ -311,6 +315,7 @@ class BasePreviewSidePanel(BaseSidePanel):
     class SidePanelToggle(BaseSidePanel.SidePanelToggle):
         aria_label = gettext_lazy("Toggle preview")
         icon_name = "mobile-alt"
+        has_counter = False
 
     name = "preview"
     title = gettext_lazy("Preview")