Display the number of comments on bubbles

app/assets/stylesheets/bubbles.css

@@ -174,6 +174,51 @@
     }
   }
 
+  &.bubble__comments {
+    --arrow-size: 1.5em;
+    --border-color: var(--bubble-color);
+    --border-size: var(--bubble-border-width);
+
+    aspect-ratio: 9/6;
+    font-size: 5cqi;
+    inset: auto auto 1em 0em;
+    place-content: center;
+
+    &::before {
+      aspect-ratio: 2;
+      background: var(--border-color);
+      clip-path: polygon(50% 100%, 100% 0, 0 0);
+      inline-size: var(--arrow-size);
+      content: "";
+      display: block;
+      inset-block-end: auto;
+      inset-block-start: 100%;
+      inset-inline-start: 48%;
+      position: absolute;
+      transform: translateX(-50%);
+    }
+  
+    &::after {
+      aspect-ratio: 2;
+      background: var(--color-bg);
+      clip-path: polygon(50% 100%, 100% 0, 0 0);
+      inline-size: var(--arrow-size);
+      content: "";
+      display: block;
+      inset-block-end: auto;
+      inset-block-start: calc(100% - var(--border-size) * 1.5);
+      inset-inline-start: 48%;
+      position: absolute;
+      transform: translateX(-50%);
+    }
+
+    @media (hover: hover) {
+      .windshield .bubble:hover & {
+        transform: translate(-0.5rem, -2rem);
+      }
+    }
+  }
+
   &.bubble__date {
     --rotation: -45deg;
 

app/views/bubbles/_bubble.html.erb

@@ -30,6 +30,7 @@
 
     <%= render "bubbles/assignments", bubble: bubble %>
     <%= render "bubbles/boosts", bubble: bubble %>
+    <%= render "bubbles/comments", bubble: bubble %>
     <%= render "bubbles/date", bubble: bubble %>
     <%= render "bubbles/image", bubble: bubble %>
   </div>

app/views/bubbles/_comments.html.erb

@@ -0,0 +1,5 @@
+<% if bubble.messages.comments.any? %>
+  <div class="bubble__bubble bubble__meta bubble__comments">
+    <span><%= bubble.messages.comments.count %></span>
+  </div>
+<% end %>