Fix Codex's code review comments

app/assets/stylesheets/embeds.css

@@ -15,7 +15,7 @@
       flex-direction: row;
     }
 
-    .cf-twitter-avatar & {
+    &.og-embed--twitter-avatar {
       flex-direction: row;
     }
   }
@@ -68,7 +68,7 @@
       }
     }
 
-    .cf-twitter-avatar & {
+    .og-embed--twitter-avatar & {
       aspect-ratio: 1;
       border-radius: 50%;
       inline-size: 2lh;

app/helpers/content_filters.rb

@@ -9,5 +9,5 @@ module ContentFilters
   EDITOR_FORMATTING_TAGS = %w[ s u mark ]
   EDITOR_FORMATTING_ATTRIBUTES = %w[ data-language ]
 
-  TextMessagePresentationFilters = ActionText::Content::Filters.new(RemoveSoloUnfurledLinkText, StyleUnfurledTwitterAvatars, SanitizeTags, SanitizeAttributes)
+  TextMessagePresentationFilters = ActionText::Content::Filters.new(RemoveSoloUnfurledLinkText, SanitizeTags, SanitizeAttributes)
 end

app/helpers/content_filters/style_unfurled_twitter_avatars.rb

@@ -1,26 +0,0 @@
-class ContentFilters::StyleUnfurledTwitterAvatars < ActionText::Content::Filter
-  def applicable?
-    unfurled_twitter_avatars.present?
-  end
-
-  def apply
-    fragment.update do |source|
-      div = source.at_css("div")
-      div["class"] = UNFURLED_TWITTER_AVATAR_CSS_CLASS
-    end
-  end
-
-  private
-    UNFURLED_TWITTER_AVATAR_CSS_CLASS = "cf-twitter-avatar"
-    TWITTER_AVATAR_URL_PREFIX = "https://pbs.twimg.com/profile_images"
-
-    def unfurled_twitter_avatars
-      fragment.find_all(opengraph_css_selector).select do |node|
-        ActionText::Attachment::OpengraphEmbed.from_node(node)&.url.to_s.start_with?(TWITTER_AVATAR_URL_PREFIX)
-      end
-    end
-
-    def opengraph_css_selector
-      "action-text-attachment[@content-type='#{ActionText::Attachment::OpengraphEmbed::OPENGRAPH_EMBED_CONTENT_TYPE}']"
-    end
-end

app/javascript/controllers/unfurl_controller.js

@@ -5,7 +5,7 @@ import { escapeHTML } from "helpers/dom_helpers"
 
 const OPENGRAPH_EMBED_CONTENT_TYPE = "application/vnd.actiontext.opengraph-embed"
 
-const UNFURLED_TWITTER_AVATAR_CSS_CLASS = "cf-twitter-avatar"
+const UNFURLED_TWITTER_AVATAR_CSS_CLASS = "og-embed--twitter-avatar"
 const TWITTER_AVATAR_URL_PREFIX = "https://pbs.twimg.com/profile_images"
 
 export default class extends Controller {
@@ -50,8 +50,8 @@ export default class extends Controller {
   }
 
   #opengraphEmbedHTML({ title, href, image, description }) {
-    return `<actiontext-opengraph-embed class="${this.#embedClass(image)}">
-      <div class="og-embed gap">
+    return `<actiontext-opengraph-embed>
+      <div class="og-embed gap ${this.#embedClass(image)}">
         <div class="og-embed__content">
           <div class="og-embed__title">
             <a href="${escapeHTML(href)}" rel="noreferrer" target="_blank">${escapeHTML(truncateString(title, 280))}</a>

app/javascript/lib/rich_text/campfire_extension.js

@@ -9,6 +9,7 @@ export default class CampfireRichTextExtension extends Lexxy.Extension {
       "figcaption",
       "actiontext-opengraph-embed",
       { tag: "div", attributes: [ "sgid" ] },
+      { tag: "span", attributes: [ "sgid" ] },
       { tag: "img", attributes: [ "alt" ] },
       { tag: "a", attributes: [ "rel", "target" ] }
     ]

app/views/action_text/attachables/_opengraph_embed.html.erb

@@ -1,6 +1,6 @@
 <figure class="attachment attachment--content attachment--og">
   <actiontext-opengraph-embed>
-    <div class="og-embed gap">
+    <div class="og-embed gap <%= "og-embed--twitter-avatar" if opengraph_embed.twitter_avatar? %>">
       <div class="og-embed__content">
         <div class="og-embed__title">
           <%= link_to_if opengraph_embed.href.present?, truncate(opengraph_embed.filename, length: 280, omission: "…"), opengraph_embed.href, rel: "noreferrer", target: "_blank" %>