[2.x] feat: Add header extension seams to the queue dashboard widget (#4850)

* Add header extension seams to the queue dashboard widget

Give QueueWidget two overridable ItemList seams for its header, mirroring
the existing tiles() pattern:

- titleItems(): content appended after the title (e.g. status pills).
  Empty by default.
- headerActions(): the action controls on the right. Ships the refresh
  button as a default item; a subclass can add its own (e.g. a link to a
  fuller dashboard).

The refresh button now lives in headerActions() rather than being
inlined, so core's own header renders identically. Purely additive: a
subclass can enrich the header without overriding content() and
duplicating its markup.

Lets an extension that subclasses this widget (e.g. fof/horizon, which
binds an enriched QueueStatsProvider) surface at-a-glance state and a
link to its own dashboard on the shared queue card.

* Lay out the queue widget header actions in a row

The headerActions() seam holds the refresh button plus any controls a
subclass adds, but the .QueueWidget-headerActions wrapper had no layout
of its own, so multiple items would flow without spacing. Give it a flex
row with a gap. (Right-alignment is already handled by space-between on
.QueueWidget-header — this is only about spacing the items within.)

Author: imorland

framework/core/js/src/admin/components/QueueWidget.tsx

@@ -62,21 +62,46 @@ export default class QueueWidget<CustomAttrs extends IDashboardWidgetAttrs = IDa
         <div className="QueueWidget-header">
           <h3 className="QueueWidget-title">
             <Icon name="fas fa-stream" /> {app.translator.trans('core.admin.queue_widget.title')}
+            {this.titleItems().toArray()}
           </h3>
-          <Button
-            className="Button Button--icon Button--flat"
-            icon="fas fa-sync-alt"
-            loading={this.loading}
-            onclick={() => this.load()}
-            aria-label={app.translator.trans('core.admin.queue_widget.refresh')}
-          />
+          <div className="QueueWidget-headerActions">{this.headerActions().toArray()}</div>
         </div>
 
         {!this.stats ? <LoadingIndicator /> : <div className="QueueWidget-tiles">{this.tiles().toArray()}</div>}
       </div>
     );
   }
 
+  /**
+   * Content appended after the widget title — e.g. status pills. Empty by
+   * default; a subclass adds items to surface at-a-glance state.
+   */
+  titleItems(): ItemList<Mithril.Children> {
+    return new ItemList<Mithril.Children>();
+  }
+
+  /**
+   * Action controls on the right of the header. Ships with the refresh button;
+   * a subclass can add its own (e.g. a link to a fuller dashboard).
+   */
+  headerActions(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add(
+      'refresh',
+      <Button
+        className="Button Button--icon Button--flat"
+        icon="fas fa-sync-alt"
+        loading={this.loading}
+        onclick={() => this.load()}
+        aria-label={app.translator.trans('core.admin.queue_widget.refresh')}
+      />,
+      100
+    );
+
+    return items;
+  }
+
   tiles(): ItemList<Mithril.Children> {
     const items = new ItemList<Mithril.Children>();
     const totals = this.stats!.totals;

framework/core/less/admin/QueueWidget.less

@@ -8,6 +8,16 @@
     padding: 16px 20px 12px;
   }
 
+  // Right-hand header controls. `space-between` on -header already pushes this
+  // to the right (it's the second flex child after -title); this lays its own
+  // items — the refresh button plus anything a subclass adds via
+  // headerActions() — out in a row with consistent spacing.
+  &-headerActions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
   &-title {
     display: flex;
     align-items: center;