From https://once.com/writebook

app/views/pictures/_form.html.erb

@@ -0,0 +1,13 @@
+<%= leafable_edit_form(picture, id: "leafable-editor") do |form| %>
+  <label class="input input--file input--picture unpad" data-controller="upload-preview">
+    <%= image_tag picture.image.attached? ? picture.image.variant(:large) : "default-picture.webp", alt: "Picture",
+        data: { upload_preview_target: "image" } %>
+    <%= form.file_field :image, class: "input", accept: "image/png, image/jpeg, image/jpg, image/webp", autofocus: true,
+        data: { upload_preview_target: "input", action: "upload-preview#previewImage" } %>
+  </label>
+  <div class="flex align-center gap margin-block">
+    <%= translation_button(:picture_caption) %>
+    <%= form.text_field :caption, class: "input", placeholder: "Picture caption" %>
+  </div>
+  <%= form.submit "Save", hidden: true, data: { upload_preview_target: "button" } %>
+<% end %>

app/views/pictures/edit.html.erb

@@ -0,0 +1,24 @@
+<% content_for(:title) { "Edit #{ @picture.title }" } %>
+
+<% content_for :header do %>
+  <%= render "leafables/edit_header", leaf: @leaf, book: @book %>
+<% end %>
+
+<% content_for :toolbar do %>
+  <div class="page-toolbar fill-selected align-center gap-half margin-block-end-double">
+    <%= editing_mode_toggle_switch(@leaf, checked: true) %>
+
+    <span class="separator margin-inline-half" aria-hidden="true"></span>
+
+    <button type="submit" form="leafable-editor" class="btn flex page-toolbar__save flex-item-justify-end flex-item-no-shrink txt-small">
+      <%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Save</span>
+    </button>
+  </div>
+<% end %>
+
+<div class="page--picture picture-form margin-none">
+  <%= render "pictures/form", book: @book, picture: @picture %>
+</div>
+
+<%= render "leaves/edit_footer", leaf: @leaf %>

app/views/pictures/new.html.erb

@@ -0,0 +1,19 @@
+<% content_for(:title) { "New image page" } %>
+
+<% content_for :header do %>
+  <nav>
+    <%= link_to @book, class: "btn flex-item-justify-start" do %>
+      <%= image_tag "remove.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Cancel</span>
+    <% end %>
+
+    <button type="submit" form="leafable-editor", class="btn flex-item-justify-end">
+      <%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Save</span>
+    </button>
+  </nav>
+<% end %>
+
+<div class="page--picture">
+  <%= render "pictures/form", book: @book, picture: @picture %>
+</div>

app/views/pictures/update.turbo_stream.erb

@@ -0,0 +1,3 @@
+<%= turbo_stream.replace dom_id(@leaf) do %>
+  <%= render "leaves/leaf", leaf: @leaf %>
+<% end %>