Make comments cache-safe

app/javascript/application.js

@@ -1,4 +1,5 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
 import "extensions"
+import "initializers"
 import "controllers"

app/javascript/controllers/thread_controller.js

@@ -0,0 +1,13 @@
+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/javascript/initializers/current.js

@@ -0,0 +1,15 @@
+class Current {
+  get user() {
+    const currentUserId = this.#extractContentFromMetaTag("current-user-id")
+
+    if (currentUserId) {
+      return { id: parseInt(currentUserId) }
+    }
+  }
+
+  #extractContentFromMetaTag(name) {
+    return document.head.querySelector(`meta[name="${name}"]`)?.getAttribute("content")
+  }
+}
+
+window.Current = new Current()

app/javascript/initializers/index.js

@@ -0,0 +1 @@
+import "initializers/current"

app/views/bubbles/_thread.html.erb

@@ -1,4 +1,8 @@
-<section id="<%= dom_id(bubble, :thread) %>" class="comments align-center center borderless margin flex flex-column gap-half" style="--bubble-color: <%= bubble.color %>;">
+<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">
   <%= render partial: "thread_entries/thread_entry", collection: bubble.thread.entries, cache: true %>
   <%= render "comments/new", bubble: bubble %>
 </section>

app/views/comments/_comment.html.erb

@@ -1,5 +1,4 @@
-<%# FIXME: Can't use a Current.user reference in a partial that must be cached. Needs to convert to use Stimulus controller pulling from a meta current-id %>
-<%= tag.div id: dom_id(comment), class: [ "comment flex align-start full-width", { "comment--mine": Current.user == comment.creator } ] do %>
+<div id="<%= dom_id(comment) %>" class="comment flex align-start full-width" data-creator-id="<%= comment.creator_id %>">
   <figure class="comment__avatar flex-item-no-shrink">
     <%= avatar_tag comment.creator, loading: :lazy %>
   </figure>
@@ -17,4 +16,4 @@
       <%= simple_format comment.body %>
     </div>
   </div>
-<% end %>
+</div>

app/views/layouts/application.html.erb

@@ -9,6 +9,10 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
+    <% if Current.user %>
+      <meta name="current-user-id" content="<%= Current.user.id %>">
+    <% end %>
+
     <%= yield :head %>
 
     <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>

config/importmap.rb

@@ -8,3 +8,4 @@ pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
 pin_all_from "app/javascript/controllers", under: "controllers"
 pin_all_from "app/javascript/helpers", under: "helpers"
 pin_all_from "app/javascript/extensions", under: "extensions"
+pin_all_from "app/javascript/initializers", under: "initializers"