Style non-previewable attachment in editor and rendered

Gemfile.lock

@@ -1,6 +1,6 @@
 GIT
   remote: https://github.com/basecamp/actiontext-lexical.git
-  revision: 11ed6d4ff17025ca89c4743b058d5a989b10b45d
+  revision: 916553ccdf1acfa9bbd86b8f1981e795a2bf9f87
   branch: initial
   specs:
     actiontext-lexical (0.1.0)

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

@@ -53,7 +53,7 @@
     }
 
     /* Attachments */
-    :where(figure) {
+    .attachment {
       block-size: auto;
       display: inline-block;
       inline-size: 100%;
@@ -61,7 +61,7 @@
       margin-inline: 0;
       max-inline-size: 100%;
 
-      :where(img) {
+      &:is(figure) img {
         block-size: auto;
         display: block;
         margin-inline: auto;
@@ -69,54 +69,114 @@
         user-select: none;
       }
 
-      :where(figcaption) {
-        color: var(--color-ink-dark);
-        display: flex;
-        font-size: var(--text-small);
-        flex-wrap: wrap;
-        line-height: 1.3;
-        gap: 0.5ch;
-        justify-content: center;
-        margin: var(--block-space-half) var(--inline-space);
-        text-align: center;
-
-        .input {
-          inline-size: 100%;
-          max-inline-size: 100%;
-          text-align: center;
-
-          @supports (field-sizing: content) {
-            field-sizing: content;
-            inline-size: auto;
-            min-inline-size: 20ch;
-          }
-        }
-      }
-
-      :where(a) {
-        --hover-size: 0;
-
-        color: var(--color-link);
-        text-decoration: underline;
-      }
-
       :where(progress) {
         inline-size: 100%;
         margin: auto;
       }
     }
 
-    .attachment__size {
-      &:before {
-        content: "· ";
-      }
+    .attachment__caption {
+      color: var(--color-ink-dark);
+      display: flex;
+      font-size: var(--text-small);
+      flex-wrap: wrap;
+      line-height: 1.3;
+      gap: 0.5ch;
+      justify-content: center;
+      margin: var(--block-space-half) var(--inline-space);
+      text-align: center;
 
-      &:after {
-        content: " ·";
+      .input {
+        inline-size: 100%;
+        max-inline-size: 100%;
+        text-align: center;
+
+        @supports (field-sizing: content) {
+          field-sizing: content;
+          inline-size: auto;
+          min-inline-size: 20ch;
+        }
       }
     }
 
-    /* Attachment junk get wrapped in a paragraph causing unwanted space */
+    .attachment__figure {
+      --hover-size: 0;
+    }
+    
+    .attachment--file {
+      align-items: center;
+      display: inline-flex;
+
+      .attachment__caption {
+        flex-direction: column;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        text-align: start;
+
+        strong {
+          color: tx(--color-ink);
+        }
+      }
+    }
+
+    .attachment__icon {
+      aspect-ratio: 4/5;
+      background-color: var(--color-canvas);
+      block-size: calc(2.5lh + 0.5ch);
+      border: 2px solid var(--color-ink-lighter);
+      border-radius: 0.3em;
+      color: var(--color-ink);
+      display: inline-grid;
+      font-size: var(--text-small);
+      font-weight: 800;
+      inline-size: auto;
+      place-content: center;
+
+      .attachment--psd &,
+      .attachment--ai &,
+      .attachment--eps &,
+      .attachment--indd &,
+      .attachment--svg & {
+        color: oklch(var(--lch-red-medium));
+        background-color: oklch(var(--lch-red-lightest));
+        border-color: oklch(var(--lch-red-light));
+      }
+
+      .attachment--css &
+      .attachment--htm &,
+      .attachment--html &,
+      .attachment--rb &,
+      .attachment--erb &,
+      .attachment--ts &,
+      .attachment--js & {
+        color: oklch(var(--lch-purple-medium));
+        background-color: oklch(var(--lch-purple-lightest));
+        border-color: oklch(var(--lch-purple-light));
+      }
+
+      .attachment--txt &,
+      .attachment--rtf &,
+      .attachment--md &,
+      .attachment--doc &,
+      .attachment--docx &,
+      .attachment--xls &,
+      .attachment--xlsx &,
+      .attachment--ppt &,
+      .attachment--pptx & {
+        color: oklch(var(--lch-blue-medium));
+        background-color: oklch(var(--lch-blue-lightest));
+        border-color: oklch(var(--lch-blue-light));
+      }
+    }
+
+    .attachment__link {
+      --hover-size: 0;
+
+      color: var(--color-link);
+      text-decoration: underline;
+    }
+
+    /* Attachment junk gets wrapped in a paragraph causing unwanted space */
     p:has(action-text-attachment) {
       display: none;
 
@@ -130,6 +190,7 @@
       display: none;
     }
 
+    /* Code */
     :where(code, pre) {
       background-color: var(--color-canvas);
       border: 1px solid var(--color-ink-lighter);

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

@@ -8,27 +8,35 @@
       <% else %>
         <span class="attachment__name"><%= blob.filename %></span>
       <% end %>
+      <span> · </span>
       <span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
-      <%= link_to rails_blob_path(blob, disposition: :attachment), class: "attachment__file-link", download: blob.filename, title: "Download #{blob.filename}" do %>
+      <span> · </span>
+      <%= link_to rails_blob_path(blob, disposition: :attachment), class: "attachment__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 attachment--file attachment--<%= blob.filename.extension -%>">
+    <%= link_to rails_blob_path(blob, disposition: :attachment), class: "attachment__figure", download: blob.filename, title: "Download #{blob.filename}" do %>
+      <%= render "active_storage/blobs/web/representation", blob: blob %>
+    <% end %>
 
     <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>
+        <% if caption = blob.try(:caption) %>
+          <strong><%= caption %></strong>
+        <% else %>
+          <strong class="attachment__name"><%= blob.filename %></strong>
+        <% end %>
+      </div>
+      <div>
+        <span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
+        <span> · </span>
+        <%= link_to rails_blob_path(blob, disposition: :attachment), class: "attachment__link", download: blob.filename, title: "Download #{blob.filename}" do %>
+          <span>Download</span>
+        <% end %>
+      </div>
     </div>
-  <% end %>
+  </div>
 <% end %>

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

@@ -15,7 +15,5 @@
 <% elsif blob.previewable? %>
   <%= image_tag url_for(blob.preview(resize_to_limit: size)) %>
 <% else %>
-  <div class="attachment__figure">
-    <%= blob.filename.extension&.downcase.presence || "unknown" %>
-  </div>
+  <span class="attachment__icon"><%= blob.filename.extension&.downcase.presence || "unknown" %></span>
 <% end %>