diff --git a/.discourse-compatibility b/.discourse-compatibility
index ac6f8bb..ebe992e 100644
--- a/.discourse-compatibility
+++ b/.discourse-compatibility
@@ -1,3 +1,4 @@
+< 3.4.0.beta4-dev: 07de7ce25081e7038e48259801930ef1a97d36c0
 < 3.4.0.beta3-dev: 699113133bcdff762c42823aace5164161ac50d7
 < 3.4.0.beta1-dev: be99b48d01d65ffdb1f646996e9917b96da78bdc
 < 3.3.0.beta1-dev: 98b5a78d48a18fedb6075bb9c4eeaf7e3ebf96cc
diff --git a/assets/javascripts/discourse/api-initializers/intitialize-whos-online-indicators.js b/assets/javascripts/discourse/api-initializers/intitialize-whos-online-indicators.js
index b8a03e0..d3b79a8 100644
--- a/assets/javascripts/discourse/api-initializers/intitialize-whos-online-indicators.js
+++ b/assets/javascripts/discourse/api-initializers/intitialize-whos-online-indicators.js
@@ -4,7 +4,7 @@ import discourseComputed, { observes } from "discourse-common/utils/decorators";
 
 const PLUGIN_ID = "whos-online";
 
-export default apiInitializer("0.8", (api) => {
+export default apiInitializer("1.39.0", (api) => {
   const siteSettings = api.container.lookup("service:site-settings");
 
   const indicatorType = siteSettings.whos_online_avatar_indicator;
@@ -69,37 +69,30 @@ export default apiInitializer("0.8", (api) => {
   });
 
   if (siteSettings.whos_online_avatar_indicator_topic_lists) {
-    api.modifyClass("component:topic-list-item", {
-      pluginId: PLUGIN_ID,
-
-      whosOnline: service(),
-      classNameBindings: ["isOnline:last-poster-online"],
-
-      @discourseComputed(
-        "topic.lastPoster.id",
-        "topic.lastPosterUser.id",
-        "whosOnline.users.[]"
-      )
-      isOnline(lastPosterId, lastPosterUserId) {
-        return this.whosOnline.isUserOnline(lastPosterId || lastPosterUserId);
-      },
-    });
-
-    api.modifyClass("component:latest-topic-list-item", {
-      pluginId: PLUGIN_ID,
-
-      whosOnline: service(),
-      classNameBindings: ["isOnline:last-poster-online"],
-
-      @discourseComputed(
-        "topic.lastPoster.id",
-        "topic.lastPosterUser.id",
-        "whosOnline.users.[]"
-      )
-      isOnline(lastPosterId, lastPosterUserId) {
-        return this.whosOnline.isUserOnline(lastPosterId || lastPosterUserId);
-      },
-    });
+    const addLastPosterOnlineClassNameTransformer = ({
+      value: additionalClasses,
+      context: { topic },
+    }) => {
+      const whosOnline = api.container.lookup("service:whos-online");
+
+      const lastPosterId = topic.lastPoster.id;
+      const lastPosterUserId = topic.lastPosterUser.id;
+
+      if (whosOnline.isUserOnline(lastPosterId || lastPosterUserId)) {
+        additionalClasses.push("last-poster-online");
+      }
+
+      return additionalClasses;
+    };
+
+    api.registerValueTransformer(
+      "latest-topic-list-item-class",
+      addLastPosterOnlineClassNameTransformer
+    );
+    api.registerValueTransformer(
+      "topic-list-item-class",
+      addLastPosterOnlineClassNameTransformer
+    );
   }
 
   api.modifyClass("component:scrolling-post-stream", {