Add nsfw banner to attachments

lib/pleroma/web/templates/static_fe/static_fe/_attachment.html.eex

@@ -1,4 +1,9 @@
 <a class="attachment" href="<%= @url %>">
+  <%= if @nsfw do %>
+  <div class="nsfw-banner" alt="<%= @name %>" title="<%= @name %>">
+    <div>Hover to show content</div>
+  </div>
+  <% end %>
   <%= case @mediaType do %>
   <% "audio" -> %>
   <audio class="u-audio" src="<%= @url %>" controls="controls"></audio>

lib/pleroma/web/templates/static_fe/static_fe/_notice.html.eex

@@ -54,7 +54,7 @@
           <div class="attachments">
             <%= for %{"name" => name, "url" => [url | _]} <- @attachment do %>
               <%= render("_attachment.html", %{name: name, url: url["href"],
-                                               mediaType: fetch_media_type(url)}) %>
+                  mediaType: fetch_media_type(url), nsfw: @sensitive}) %>
             <% end %>
           </div>
           <% end %>

priv/static/static-fe/static-fe.css

@@ -442,6 +442,7 @@ .attachment {
     display: flex;
     flex-grow: 1;
     justify-content: center;
+    position: relative;
     min-width: 0;
 }
 
@@ -464,3 +465,21 @@ .fa-icon {
 .status-actions .fa-icon {
     height: 1.1em;
 }
+
+.nsfw-banner {
+    position: absolute;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+.nsfw-banner div {
+    width: 100%;
+    text-align: center;
+}
+
+.nsfw-banner:not(:hover) {
+    background-color: var(--background);
+}
+.nsfw-banner:hover div {
+    display: none;
+}