thread-controller -> created-by-current-user-controller

app/javascript/controllers/created_by_current_user_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { selector: String }
+  static classes = [ "differentiator" ]
+
+  connect() {
+    this.#createdElements.forEach(el => el.classList.add(this.differentiatorClass))
+  }
+
+  get #createdElements() {
+    return this.element.querySelectorAll(this.#selector)
+  }
+
+  get #selector() {
+    return `${this.selectorValue}[data-creator-id='${Current.user.id}']`
+  }
+}

app/javascript/controllers/thread_controller.js

@@ -1,13 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static classes = [ "myComment" ]
-
-  connect() {
-    this.#myComments.forEach(comment => comment.classList.add(this.myCommentClass))
-  }
-
-  get #myComments() {
-    return this.element.querySelectorAll(`.comment[data-creator-id='${Current.user.id}']`)
-  }
-}

app/views/bubbles/_thread.html.erb

@@ -1,8 +1,9 @@
 <section id="<%= dom_id(bubble, :thread) %>"
     class="comments align-center center borderless margin flex flex-column gap-half"
     style="--bubble-color: <%= bubble.color %>"
-    data-controller="thread"
-    data-thread-my-comment-class="comment--mine">
+    data-controller="created-by-current-user"
+    data-created-by-current-user-selector-value=".comment"
+    data-created-by-current-user-differentiator-class="comment--mine">
   <%# Template Dependency: comments/comment %>
   <%# Template Dependency: rollups/rollup %>
   <%= render partial: "thread_entries/thread_entry", collection: bubble.thread.entries, cache: true %>