Display quotes in email notifications (#36379)

app/javascript/styles/entrypoints/mailer.scss

@@ -88,6 +88,14 @@ table + p {
   padding: 24px;
 }
 
+.email-inner-nested-card-td {
+  border-radius: 12px;
+  padding: 18px;
+  overflow: hidden;
+  background-color: #fff;
+  border: 1px solid #dfdee3;
+}
+
 // Account
 .email-account-banner-table {
   background-color: #f3f2f5;
@@ -559,12 +567,29 @@ table + p {
   }
 }
 
+.email-quote-header-img {
+  width: 34px;
+
+  img {
+    width: 34px;
+    height: 34px;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+}
+
 .email-status-header-text {
   padding-left: 16px;
   padding-right: 16px;
   vertical-align: middle;
 }
 
+.email-quote-header-text {
+  padding-left: 14px;
+  padding-right: 14px;
+  vertical-align: middle;
+}
+
 .email-status-header-name {
   font-size: 16px;
   font-weight: 600;
@@ -578,6 +603,19 @@ table + p {
   color: #746a89;
 }
 
+.email-quote-header-name {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 18px;
+  color: #17063b;
+}
+
+.email-quote-header-handle {
+  font-size: 13px;
+  line-height: 18px;
+  color: #746a89;
+}
+
 .email-status-content {
   padding-top: 24px;
 }
@@ -589,6 +627,10 @@ table + p {
 }
 
 .email-status-prose {
+  .quote-inline {
+    display: none;
+  }
+
   p {
     font-size: 14px;
     line-height: 20px;

app/views/notification_mailer/_nested_quote.html.haml

@@ -0,0 +1,17 @@
+%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+  %tr
+    %td.email-quote-header-img
+      = image_tag full_asset_url(status.account.avatar.url), alt: '', width: 34, height: 34
+    %td.email-quote-header-text
+      %h2.email-quote-header-name
+        = display_name(status.account)
+      %p.email-quote-header-handle
+        @#{status.account.pretty_acct}
+
+%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+  %tr
+    %td.email-status-content
+      = render 'status_content', status: status
+
+      %p.email-status-footer
+        = link_to l(status.created_at.in_time_zone(time_zone.presence), format: :with_time_zone), web_url("@#{status.account.pretty_acct}/#{status.id}")

app/views/notification_mailer/_status.html.haml

@@ -11,21 +11,12 @@
 %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
   %tr
     %td.email-status-content
-      .auto-dir
-        - if status.spoiler_text?
-          %p.email-status-spoiler
-            = status.spoiler_text
-
-        .email-status-prose
-          = status_content_format(status)
-
-        - if status.ordered_media_attachments.size.positive?
-          %p.email-status-media
-            - status.ordered_media_attachments.each do |a|
-              - if status.local?
-                = link_to full_asset_url(a.file.url(:original)), full_asset_url(a.file.url(:original))
-              - else
-                = link_to a.remote_url, a.remote_url
+      = render 'status_content', status: status
 
+      - if status.local? && status.quote
+        %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+          %tr
+            %td.email-inner-nested-card-td
+              = render 'nested_quote', status: status.quote.quoted_status, time_zone: time_zone
       %p.email-status-footer
         = link_to l(status.created_at.in_time_zone(time_zone.presence), format: :with_time_zone), web_url("@#{status.account.pretty_acct}/#{status.id}")

app/views/notification_mailer/_status.text.erb

@@ -4,5 +4,9 @@
 >
 <% end %>
 > <%= raw word_wrap(extract_status_plain_text(status), break_sequence: "\n> ") %>
+<% if status.local? && status.quote %>
+>
+>> <%= raw word_wrap(extract_status_plain_text(status.quote.quoted_status), break_sequence: "\n>> ") %>
+<% end %>
 
 <%= raw t('application_mailer.view')%> <%= web_url("@#{status.account.pretty_acct}/#{status.id}") %>

app/views/notification_mailer/_status_content.html.haml

@@ -0,0 +1,15 @@
+.auto-dir
+  - if status.spoiler_text?
+    %p.email-status-spoiler
+      = status.spoiler_text
+
+  .email-status-prose
+    = status_content_format(status)
+
+  - if status.ordered_media_attachments.size.positive?
+    %p.email-status-media
+      - status.ordered_media_attachments.each do |a|
+        - if status.local?
+          = link_to full_asset_url(a.file.url(:original)), full_asset_url(a.file.url(:original))
+        - else
+          = link_to a.remote_url, a.remote_url