Add bubble images inline without a special form

app/assets/images/camera.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="14.75" cy="13.125" r="3.75"/><path d="m21.444 6.125h-1.316a.534.534 0 0 1 -.481-.346c-.618-1.304-1.257-2.654-2.647-2.654h-5c-1.071 0-1.636.778-2.659 2.191-.384.527-.51.809-.844.809h-6c-2.063 0-2.497 1.209-2.497 2.223v10.388a2.254 2.254 0 0 0 2.556 2.389h18.888a2.254 2.254 0 0 0 2.556-2.389v-10.388c0-1.014-.443-2.223-2.556-2.223zm-.944 7a5.75 5.75 0 1 1 -5.75-5.75 5.756 5.756 0 0 1 5.75 5.75zm-15.5-3.25a1.25 1.25 0 1 1 -1.25-1.25 1.25 1.25 0 0 1 1.25 1.25z"/><path d="m2.5 5.109 3 .016a.5.5 0 0 0 .5-.5v-.25a1.5 1.5 0 0 0 -1.5-1.5h-1a1.5 1.5 0 0 0 -1.5 1.5v.234a.5.5 0 0 0 .5.5z"/></svg>

app/assets/stylesheets/bubble.css

@@ -67,7 +67,7 @@
 
 .bubble__bubble {
   background-color: var(--color-bg);
-  border: 0.3em solid var(--bubble-color);
+  border: max(3px, 0.3em) solid var(--bubble-color);
   border-radius: 50%;
   position: absolute;
   z-index: -1;
@@ -114,6 +114,19 @@
     }
   }
 
+  &.bubble__attachment {
+    aspect-ratio: 1;
+    inset: -4cqi 24cqi auto auto;
+
+    .btn {
+      font-size: 4cqi;
+    }
+
+    .windshield & {
+      display: none;
+    }
+  }
+
   &.bubble__date {
     aspect-ratio: 1;
     inset: 2cqi 2cqi auto auto;
@@ -138,7 +151,7 @@
     white-space: nowrap;
     z-index: 1;
 
-    &:has(.input) {
+    &:has(.input:not([type="file"])) {
       border-radius: 2em;
       padding: 0.2em 0.5em;
 

app/javascript/controllers/form_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "cancel" ]
+
+  submit() {
+    this.element.requestSubmit()
+  }
+
+  cancel() {
+    this.cancelTarget?.click()
+  }
+
+  preventAttachment(event) {
+    event.preventDefault()
+  }
+}

app/views/bubbles/_bubble.html.erb

@@ -1,4 +1,4 @@
-<div class="bubble" style="view-transition-name: bubble-<%= bubble.id -%>; --bubble-color: <%= bubble.color %>; --bubble-rotate: <%= bubble_rotation(bubble) -%>deg; <%= bubble_size(bubble) %>">
+<div class="bubble" data-controller="upload-preview" style="view-transition-name: bubble-<%= bubble.id -%>; --bubble-color: <%= bubble.color %>; --bubble-rotate: <%= bubble_rotation(bubble) -%>deg; <%= bubble_size(bubble) %>">
   <h1 class="bubble__title"><%= bubble.title %></h1>
 
   <svg class="bubble__svg" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg" transform="rotate(<%= bubble_rotation(bubble) -%>)"><path d="m0 0h990v990h-990z" fill="none" stroke="none" /><path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/></svg>
@@ -7,9 +7,18 @@
     <span class="for-screen-reader"><%= bubble.title %></span>
   <% end %>
 
-  <% if bubble.image.attached? %>
-    <div class="bubble__image">
-      <%= image_tag bubble.image %>
+  <div class="bubble__image">
+    <%= image_tag bubble.image.attached? ? bubble.image : "", data: { upload_preview_target: "image" } %>
+  </div>
+
+  <%= form_with model: bubble, data: { controller: "form" } do | form | %>
+    <div class="bubble__bubble bubble__meta bubble__attachment">
+      <label class="btn btn--plain input--file">
+        <%= image_tag "camera.svg", aria: { hidden: "true" }, size: 20 %>
+        <%= form.file_field :image, class: "input", accept: "image/*",
+              data: { action: "upload-preview#previewImage change->form#submit" } %>
+        <span class="for-screen-reader">Upload an image</span>
+      </label>
     </div>
   <% end %>