Add generic solution for 'mark as read' in list views

BurntimeX · BurntimeX · commit d18893469300 · 2025-08-07T15:30:17.000+02:00
diff --git a/ts/WoltLabSuite/Core/Component/ListView/State.ts b/ts/WoltLabSuite/Core/Component/ListView/State.ts
@@ -7,9 +7,12 @@
  * @since 6.2
  */
 
+import { wheneverFirstSeen } from "WoltLabSuite/Core/Helper/Selector";
 import Filter from "./Filter";
 import Selection from "./Selection";
 import Sorting from "./Sorting";
+import { postObject } from "WoltLabSuite/Core/Api/PostObject";
+import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex";
 
 export const enum StateChangeCause {
   Change,
@@ -71,6 +74,18 @@ export class State extends EventTarget {
       this.#handlePopState();
     });
 
+    wheneverFirstSeen(`#${viewId}_items .listView__item__markAsRead`, (button: HTMLButtonElement) => {
+      button.addEventListener(
+        "click",
+        promiseMutex(async () => {
+          await postObject(button.dataset.endpoint!);
+          button
+            .closest(".listView__item")
+            ?.dispatchEvent(new CustomEvent("interaction:invalidate", { bubbles: true }));
+        }),
+      );
+    });
+
     this.#updatePaginationUrl();
     this.#updateListViewFooter();
   }
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/ListView/State.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/ListView/State.js
diff --git a/wcfsetup/install/files/lib/system/listView/AbstractListView.class.php b/wcfsetup/install/files/lib/system/listView/AbstractListView.class.php
@@ -2,6 +2,7 @@
 
 namespace wcf\system\listView;
 
+use wcf\action\ApiAction;
 use wcf\action\ListViewFilterAction;
 use wcf\data\DatabaseObject;
 use wcf\data\DatabaseObjectDecorator;
@@ -16,6 +17,7 @@
 use wcf\system\listView\filter\exception\InvalidFilterValue;
 use wcf\system\request\LinkHandler;
 use wcf\system\WCF;
+use wcf\util\StringUtil;
 
 /**
  * Abstract implementation of a list view.
@@ -48,6 +50,7 @@ abstract class AbstractListView
     private bool $allowInteractions = true;
     private bool $allowBulkInteractions = true;
     private int $fixedNumberOfItems = 0;
+    private string $markAsReadEndpoint = '';
 
     /**
      * @var array<string, string>
@@ -673,6 +676,35 @@ public function getContainerCssClassName(): string
         return $this->containerCssClassName;
     }
 
+    public function setMarkAsReadEndpoints(string $endpoint): void
+    {
+        $this->markAsReadEndpoint = $endpoint;
+    }
+
+    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="listView__item__markAsRead jsTooltip"
+                title="{$title}"
+                data-endpoint="{$endpoint}"
+            >
+                <span class="listView__item__unread__indicator" aria-hidden="true"></span>
+            </button>
+            HTML;
+    }
+
     /**
      * @return TDatabaseObjectList
      */
diff --git a/wcfsetup/install/files/style/ui/discussionList.scss b/wcfsetup/install/files/style/ui/discussionList.scss
@@ -140,29 +140,12 @@
 	grid-template-rows: min-content min-content 1fr;
 }
 
-.discussionList__item__markAsRead {
-	align-items: center;
+.discussionList__item .listView__item__markAsRead {
 	grid-area: markAsRead;
-	display: flex;
-	padding: 0 5px;
 	margin-right: 5px;
 	z-index: 1;
 }
 
-.discussionList__item__unread__indicator {
-	background-color: var(--wcfButtonPrimaryBackground);
-	border-radius: 50%;
-	display: inline-block;
-	height: 10px;
-	width: 10px;
-}
-
-@media (hover: hover) {
-	.discussionList__item__markAsRead:hover .discussionList__item__unread__indicator {
-		background-color: var(--wcfButtonPrimaryBackgroundActive);
-	}
-}
-
 .discussionList__item__title {
 	grid-area: title;
 
diff --git a/wcfsetup/install/files/style/ui/listView.scss b/wcfsetup/install/files/style/ui/listView.scss
@@ -114,3 +114,23 @@
 	display: flex;
 	padding: 0 6px;
 }
+
+.listView__item__markAsRead {
+	align-items: center;
+	display: flex;
+	padding: 0 5px;
+}
+
+.listView__item__unread__indicator {
+	background-color: var(--wcfButtonPrimaryBackground);
+	border-radius: 50%;
+	display: inline-block;
+	height: 10px;
+	width: 10px;
+}
+
+@media (hover: hover) {
+	.listView__item__markAsRead:hover .listView__item__unread__indicator {
+		background-color: var(--wcfButtonPrimaryBackgroundActive);
+	}
+}
