Unify 'mark as read' function for moderation queue

Replaces the dropdown 'mark as read' interaction with a dedicated per-row button rendered next to the title, gates the 'mark all as read' button on canMarkAsRead(), and moves the JS module from Ui/Moderation to Component/Moderation.

ref https://www.woltlab.com/community/thread/318268-moderationseintr%C3%A4ge-neue-eintr%C3%A4ge/

Author: BurntimeX

com.woltlab.wcf/templates/moderationList.tpl

@@ -6,7 +6,21 @@
 {/capture}
 
 {capture assign='contentInteractionButtons'}
-	<button type="button" class="markAllAsReadButton contentInteractionButton button small jsOnly">{icon name='check'} <span>{lang}wcf.global.button.markAllAsRead{/lang}</span></button>
+	{if $gridView->canMarkAsRead()}
+		<button type="button" class="markAllModerationQueuesAsReadButton contentInteractionButton button small jsOnly">
+			{icon name='check'}
+			<span>{lang}wcf.global.button.markAllAsRead{/lang}</span>
+		</button>
+
+		<script data-relocate="true">
+			require(['WoltLabSuite/Core/Component/Moderation/MarkAllModerationQueuesAsRead'], ({ setup }) => {
+				setup(
+					document.querySelector('.markAllModerationQueuesAsReadButton'),
+					document.getElementById('{unsafe:$gridView->getID()|encodeJS}_table')
+				);
+			});
+		</script>
+	{/if}
 	<a href="{link controller='DeletedContentList'}{/link}" class="contentInteractionButton button small">{icon name='trash-can'} <span>{lang}wcf.moderation.showDeletedContent{/lang}</span></a>
 {/capture}
 
@@ -16,10 +30,4 @@
 	{unsafe:$gridView->render()}
 </div>
 
-<script data-relocate="true">
-	require(['WoltLabSuite/Core/Ui/Moderation/MarkAllAsRead'], (MarkAllAsRead) => {
-		MarkAllAsRead.setup();
-	});
-</script>
-
 {include file='footer'}

ts/WoltLabSuite/Core/Component/GridView.ts

@@ -10,6 +10,7 @@
 import { getRow } from "../Api/GridViews/GetRow";
 import { getRows } from "../Api/GridViews/GetRows";
 import { getBulkContextMenuOptions } from "../Api/Interactions/GetBulkContextMenuOptions";
+import { postObject } from "../Api/PostObject";
 import DomChangeListener from "../Dom/Change/Listener";
 import DomUtil from "../Dom/Util";
 import { promiseMutex } from "../Helper/PromiseMutex";
@@ -104,6 +105,16 @@ export class GridView {
         });
       }
     });
+
+    wheneverFirstSeen(`#${this.#table.id} tbody tr .gridView__row__markAsRead`, (button: HTMLButtonElement) => {
+      button.addEventListener(
+        "click",
+        promiseMutex(async () => {
+          await postObject(button.dataset.endpoint!);
+          button.closest("tr")?.dispatchEvent(new CustomEvent("interaction:invalidate", { bubbles: true }));
+        }),
+      );
+    });
   }
 
   #initEventListeners(): void {

ts/WoltLabSuite/Core/Component/Moderation/MarkAllModerationQueuesAsRead.ts

@@ -0,0 +1,34 @@
+/**
+ * Handles the 'mark as read' action for moderation queues.
+ *
+ * @author Marcel Werk
+ * @copyright 2001-2026 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.3
+ * @woltlabExcludeBundle tiny
+ */
+
+import { showDefaultSuccessSnackbar } from "WoltLabSuite/Core/Component/Snackbar";
+import { markAllModerationQueuesAsRead } from "WoltLabSuite/Core/Api/ModerationQueues/MarkAllModerationQueuesAsRead";
+import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex";
+
+async function markAllAsRead(button: HTMLElement, gridView?: HTMLElement): Promise<void> {
+  (await markAllModerationQueuesAsRead()).unwrap();
+
+  if (gridView !== undefined) {
+    gridView.dispatchEvent(new CustomEvent("interaction:invalidate-all"));
+  }
+
+  button.remove();
+
+  showDefaultSuccessSnackbar();
+}
+
+export function setup(button: HTMLElement, gridView?: HTMLElement): void {
+  button.addEventListener(
+    "click",
+    promiseMutex(async () => {
+      await markAllAsRead(button, gridView);
+    }),
+  );
+}

ts/WoltLabSuite/Core/Ui/Moderation/MarkAllAsRead.ts

@@ -2,6 +2,7 @@
 
 namespace wcf\system\gridView;
 
+use wcf\action\ApiAction;
 use wcf\action\GridViewFilterAction;
 use wcf\data\DatabaseObject;
 use wcf\data\DatabaseObjectList;
@@ -64,6 +65,7 @@ abstract class AbstractGridView
     private ?IInteractionProvider $interactionProvider = null;
     private ?IBulkInteractionProvider $bulkInteractionProvider = null;
     private InteractionContextMenuComponent $interactionContextMenuComponent;
+    private string $markAsReadEndpoint = '';
 
     /**
      * @var array<string, string|int>
@@ -313,6 +315,10 @@ public function renderColumn(GridViewColumn $column, DatabaseObject $row): strin
             $value = $this->rowLink->render($value, $row, $column->isTitleColumn());
         }
 
+        if ($column->hasMarkAsReadButton() && $this->rowIsNew($row)) {
+            $value = $this->renderMarkAsReadButton($row) . $value;
+        }
+
         return $value;
     }
 
@@ -952,6 +958,49 @@ public function getAvailableFilters(): array
         return $this->availableFilters;
     }
 
+    /**
+     * @since 6.3
+     */
+    public function setMarkAsReadEndpoint(string $endpoint): void
+    {
+        $this->markAsReadEndpoint = $endpoint;
+    }
+
+    /**
+     * @since 6.3
+     */
+    public function renderMarkAsReadButton(DatabaseObject $object): string
+    {
+        if (!$this->markAsReadEndpoint) {
+            throw new \BadMethodCallException("No mark as read endpoint has been specified.");
+        }
+
+        $endpoint = StringUtil::encodeHTML(
+            LinkHandler::getInstance()->getControllerLink(ApiAction::class, ['id' => 'rpc']) .
+                \sprintf($this->markAsReadEndpoint, $object->getObjectID())
+        );
+        $title = WCF::getLanguage()->get('wcf.global.button.markAsRead');
+
+        return <<<HTML
+            <button
+                type="button"
+                class="gridView__row__markAsRead jsTooltip"
+                title="{$title}"
+                data-endpoint="{$endpoint}"
+            >
+                <span class="gridView__row__unread__indicator" aria-hidden="true"></span>
+            </button>
+            HTML;
+    }
+
+    /**
+     * @since 6.3
+     */
+    public function rowIsNew(DatabaseObject $row): bool
+    {
+        return false;
+    }
+
     private function init(): void
     {
         if (!isset($this->objectList)) {

wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView.js

@@ -35,6 +35,7 @@ final class GridViewColumn
     private bool $hidden = false;
     private bool $unsafeDisableEncoding = false;
     private bool $titleColumn = false;
+    private bool $markAsReadButton = false;
 
     private function __construct(private readonly string $id) {}
 
@@ -302,6 +303,28 @@ public function applyRowLink(): bool
         )) === 0;
     }
 
+    /**
+     * Sets whether the mark as read button is rendered in this column for unread rows.
+     *
+     * @since 6.3
+     */
+    public function markAsReadButton(bool $markAsReadButton = true): static
+    {
+        $this->markAsReadButton = $markAsReadButton;
+
+        return $this;
+    }
+
+    /**
+     * Returns true if the mark as read button is rendered in this column for unread rows.
+     *
+     * @since 6.3
+     */
+    public function hasMarkAsReadButton(): bool
+    {
+        return $this->markAsReadButton;
+    }
+
     /**
      * Returns the default renderer for the rendering of columns.
      */

wcfsetup/install/files/js/WoltLabSuite/Core/Component/Moderation/MarkAllModerationQueuesAsRead.js

@@ -44,26 +44,15 @@ public function __construct()
             GridViewColumn::for('title')
                 ->label('wcf.global.title')
                 ->titleColumn()
+                ->markAsReadButton()
                 ->renderer(
                     new class extends DefaultColumnRenderer {
                         #[\Override]
                         public function render(mixed $value, DatabaseObject $row): string
                         {
                             \assert($row instanceof ViewableModerationQueue);
-                            $title = StringUtil::encodeHTML($row->getTitle());
 
-                            if ($row->isNew()) {
-                                $badgeLabel = WCF::getLanguage()->get('wcf.message.new');
-                                $badge = <<<HTML
-                                        <span class="badge label newMessageBadge">{$badgeLabel}</span>
-                                    HTML;
-                            } else {
-                                $badge = '';
-                            }
-
-                            return <<<HTML
-                                    {$title}{$badge}
-                                HTML;
+                            return StringUtil::encodeHTML($row->getTitle());
                         }
                     }
                 ),
@@ -216,6 +205,16 @@ public function render(mixed $value, DatabaseObject $row): string
         $this->setDefaultSortField("lastChangeTime");
         $this->setDefaultSortOrder("DESC");
         $this->addRowLink(new GridViewRowLink(isLinkableObject: true));
+        $this->setMarkAsReadEndpoint('core/moderation-queues/%s/mark-as-read');
+    }
+
+    public function canMarkAsRead(): bool
+    {
+        if (!WCF::getUser()->userID) {
+            return false;
+        }
+
+        return ModerationQueueManager::getInstance()->getUnreadModerationCount() > 0;
     }
 
     private function getDefinitionFilter(): SelectFilter
@@ -275,4 +274,12 @@ protected function getInitializedEvent(): ModerationQueueGridViewInitialized
     {
         return new ModerationQueueGridViewInitialized($this);
     }
+
+    #[\Override]
+    public function rowIsNew(DatabaseObject $row): bool
+    {
+        \assert($row instanceof ViewableModerationQueue);
+
+        return $row->isNew();
+    }
 }