docbrown/app/views/notifications/shared/_comment_box.html.erb

<% cache "comment-box-#{@last_user_reaction}-#{@last_user_comment}-#{json_data['comment']['updated_at']}-#{json_data['comment']['id']}" do %>
  <% if json_data["comment"]["commentable"] %>
    <% if json_data["comment"]["depth"] && json_data["comment"]["depth"] > 0 %>
      <h3>
        <a href="<%= json_data["comment"]["ancestors"].last["path"] %>" class="crayons-link notification__reply-title">
          <%= t("views.comments.re.text_html", re: tag.span(t("views.comments.re.re"), class: "fw-normal opacity-50"), title: json_data["comment"]["ancestors"].last["title"]) %>
        </a>
      </h3>
    <% end %>
    <div class="crayons-card notification__preview relative">
      <div class="text-styles text-styles--tertiary notification__preview__inner">
        <%= json_data["comment"]["processed_html"].html_safe %>
      </div>

      <% if context == "moderation" && current_user.has_role?(:trusted) %>
        <div class="crayons-card crayons-card--secondary crayons-card--elevated notification__mod-controls">
          <button
            class="crayons-btn crayons-btn--icon crayons-btn--icon-rounded crayons-btn--ghost inline-flex crayons-btn--s reaction-button <%= Reaction.cached_any_reactions_for?(notification.mocked_object("comment"), current_user, "thumbsdown") ? "reacted" : "" %>"
            data-reactable-id="<%= json_data["comment"]["id"] %>"
            data-category="thumbsdown"
            data-reactable-type="Comment"
            title="thumbsdown">
            <%= inline_svg_tag("twemoji/thumb-down.svg", aria: true, class: "crayons-icon crayons-icon--default reaction-icon", width: 24, height: 24, title: "Thumb down") %>
          </button>
          <button
            class="crayons-btn crayons-btn--icon crayons-btn--icon-rounded crayons-btn--ghost inline-flex crayons-btn--s reaction-button <%= Reaction.cached_any_reactions_for?(notification.mocked_object("comment"), current_user, "vomit") ? "reacted" : "" %>"
            data-reactable-id="<%= json_data["comment"]["id"] %>"
            data-category="vomit"
            data-reactable-type="Comment"
            title="vomit">
            <%= inline_svg_tag("twemoji/suspicious.svg", aria: true, class: "crayons-icon crayons-icon--default reaction-icon", width: 24, height: 24, title: "Suspicious") %>
          </button>
        </div>
      <% end %>

      <footer class="comment-actions">
        <div class="notification__actions">
          <button
            class="crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button <%= Reaction.cached_any_reactions_for?(notification.mocked_object("comment"), current_user, "like") ? "reacted" : "" %>"
            data-reactable-id="<%= json_data["comment"]["id"] %>"
            data-category="like"
            data-reactable-type="Comment"
            title="heart">
            <%= inline_svg_tag("small-heart.svg", aria: true, class: "crayons-icon reaction-icon not-reacted", title: t("views.comments.footer.heart.icon")) %>
            <%= inline_svg_tag("small-heart-filled.svg", aria: true, class: "crayons-icon reaction-icon--like reaction-icon reacted", title: t("views.comments.footer.heart.icon")) %>
            <span class="hidden m:inline-block"><%= t("views.comments.footer.heart.text") %></span>
          </button>

          <% cache "comment-box-comment-reply-#{@last_user_comment}-#{json_data['comment']['updated_at']}-#{json_data['comment']['id']}" do %>
            <% reply = Comment.select(:id, :user_id, :ancestry).find_by(id: json_data["comment"]["id"])&.children&.find_by(user_id: current_user.id) %>
            <% if reply %>
              <a class="crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left mr-1 inline-flex reaction-comment reacted" href="<%= reply.path %>">
                <%= inline_svg_tag("small-comment-filled.svg", aria: true, class: "crayons-icon reaction-icon--comment reaction-icon reacted", title: t("views.comments.footer.reply.icon")) %>
                <span class="hidden m:inline-block"><%= t("views.comments.footer.reply.done") %></span>
              </a>
            <% else %>
              <a class="crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" data-reactable-id="<%= json_data["comment"]["id"] %>" href="#<%= json_data["comment"]["path"] %>">
                <%= inline_svg_tag("small-comment.svg", aria: true, class: "crayons-icon reaction-icon not-reacted", title: t("views.comments.footer.reply.icon")) %>
                <%= inline_svg_tag("small-comment-filled.svg", aria: true, class: "crayons-icon reaction-icon--comment reaction-icon reacted", title: t("views.comments.footer.reply.icon")) %>
                <span class="hidden m:inline-block"><%= t("views.comments.footer.reply.text") %></span>
              </a>
            <% end %>
          <% end %>
          <a href="<%= json_data["comment"]["path"] %>" class="crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s inline-flex">
            <%= inline_svg_tag("small-link.svg", aria: true, class: "crayons-icon", title: t("views.comments.footer.view.icon")) %><span class="hidden m:inline-block"><%= t("views.comments.footer.view.text") %></span>
          </a>
        </div>

        <% @comment = Comment.new %>
        <%= form_for(@comment,
                     authenticity_token: false,
                     html: { id: "comment-form-for-#{json_data['comment']['id']}", onsubmit: "handleCommentSubmit.bind(this)(event)", onkeydown: "handleKeyDown(event)", class: "p-2 pb-1 pt-3 hidden" }) do |f| %>
          <%= f.hidden_field :commentable_id, value: json_data["comment"]["commentable"]["id"] %>
          <%= f.hidden_field :commentable_type, value: json_data["comment"]["commentable"]["class"]["name"] %>

          <%= f.hidden_field :parent_id, value: json_data["comment"]["id"] %>
          <%= f.text_area :body_markdown, id: "comment-textarea-for-#{json_data['comment']['id']}", class: "crayons-textfield mb-2 resize-y", placeholder: t("views.comments.footer.reply.placeholder"), "aria-label": t("views.comments.footer.reply.aria_label"), onfocus: "handleFocus(event)" %>
          <div class="actions">
            <button type="submit" class="crayons-btn comment-action-button" onclick="validateField(event)"><%= t("views.comments.write.submit") %></button>
          </div>
        <% end %>
      </footer>
    </div>
  <% end %>
<% end %>