Minimal styles for non-image attachments

app/assets/stylesheets/rich-text-content.css

@@ -110,6 +110,8 @@
       }
     }
 
+    /* Attachments */
+
     figure {
       display: inline-block;
       position: relative;
@@ -129,6 +131,42 @@
       }
     }
 
+    .attachment {
+      border: 1px solid #cdbbfa;
+      border-radius: 16px;
+      padding: 24px;
+      background-color: white;
+      box-shadow: 0 0 0 2px #e3d8fd;
+      font-family: sans-serif;
+      display: inline-block;
+
+      &:not(:has(img,embed,video)) {
+        max-width: 25rem;
+      }
+
+      embed,video {
+        max-width: 100%;
+      }
+    }
+
+    .attachment__caption {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .attachment__name {
+      font-size: 24px;
+      font-weight: 700;
+      color: #1f1f1f;
+    }
+
+    .attachment__size {
+      font-size: 16px;
+      font-weight: 600;
+      color: #888;
+    }
+
     /* Code */
     code[data-language] {
       display: block;

app/views/active_storage/blobs/_blob.html.erb

@@ -1,14 +1,34 @@
-<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
-  <% if blob.representable? %>
-    <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>
-  <% end %>
+<% if blob.representable? %>
+  <figure class="attachment attachment--preview attachment--<%= blob.filename.extension %>">
+    <%= render "active_storage/blobs/web/representation", blob: blob %>
 
-  <figcaption class="attachment__caption">
-    <% if caption = blob.try(:caption) %>
-      <%= caption %>
-    <% else %>
-      <span class="attachment__name"><%= blob.filename %></span>
+    <figcaption class="attachment__caption">
+      <% if caption = blob.try(:caption) %>
+        <span><%= caption %></span>
+      <% else %>
+        <span class="attachment__name"><%= blob.filename %></span>
+      <% end %>
       <span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
-    <% end %>
-  </figcaption>
-</figure>
+      <%= link_to rails_blob_path(blob, disposition: :attachment), class: "attachment__file-link", download: blob.filename, title: "Download #{blob.filename}" do %>
+        <span>Download</span>
+      <% end %>
+    </figcaption>
+  </figure>
+<% else %>
+  <%= link_to rails_blob_path(blob, disposition: :attachment),
+        class: "attachment attachment--file attachment--#{blob.filename.extension}",
+        download: blob.filename,
+        title: "Download #{blob.filename}" do
+  %>
+    <%= render "active_storage/blobs/web/representation", blob: blob %>
+
+    <div class="attachment__caption">
+      <% if caption = blob.try(:caption) %>
+        <span><%= caption %></span>
+      <% else %>
+        <span class="attachment__name"><%= blob.filename %></span>
+      <% end %>
+      <span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
+    </div>
+  <% end %>
+<% end %>

app/views/active_storage/blobs/web/_representation.html.erb

@@ -0,0 +1,23 @@
+<% size = local_assigns[:in_gallery] ? [800, 600] : [1024, 768] %>
+
+<% if blob.video? %>
+  <%= tag.video \
+            src: rails_blob_path(blob),
+            controls: true,
+            preload: :none,
+            width: "100%", height: "100%" %>
+<% elsif blob.audio? %>
+  <audio controls="true" width="100%" preload="metadata">
+    <source src="<%= rails_blob_url(blob) %>" type="<%= blob.content_type %>">
+  </audio>
+<% elsif blob.content_type == "application/pdf" %>
+  <embed src="<%= rails_blob_url(blob) %>" width="1024" height="768" type="application/pdf">
+<% elsif blob.variable? %>
+  <%= image_tag url_for(blob.variant(loader: { n: -1 }, resize_to_limit: size)) %>
+<% elsif blob.previewable? %>
+  <%= image_tag url_for(blob.preview(resize_to_limit: size)) %>
+<% else %>
+  <div class="attachment__figure">
+    <%= file_extension_for(blob) %>
+  </div>
+<% end %>