Merge branch 'main' into house

* main:
  Update test
  Wire up comment deletion
  Whitespace
  Wire up editing comments
  Open the title field for editing after creating a new bubble

app/assets/stylesheets/bubbles.css

@@ -330,6 +330,11 @@
     color: var(--splat-color);
   }
 
+  textarea::selection {
+    background-color: var(--bubble-color);
+    color: var(--color-ink-reversed);
+  }
+
   @media (hover: hover) {
     .bubble:has(.bubble__image img:not([src=""])):hover & {
       color: var(--color-ink-reversed);

app/controllers/bubbles_controller.rb

@@ -12,7 +12,7 @@ class BubblesController < ApplicationController
 
   def create
     @bubble = @bucket.bubbles.create!
-    redirect_to @bubble
+    redirect_to bucket_bubble_path(@bubble.bucket, @bubble, editing: true)
   end
 
   def show

app/controllers/comments_controller.rb

@@ -1,13 +1,40 @@
 class CommentsController < ApplicationController
   include BubbleScoped, BucketScoped
+  before_action :set_comment, only: [ :show, :edit, :update, :destroy ]
 
   def create
     @bubble.capture new_comment
     redirect_to @bubble
   end
 
+  def show
+  end
+
+  def edit
+  end
+
+  def update
+    @comment.update! comment_params
+    render :show
+  end
+
+  def destroy
+    @comment.destroy
+    redirect_to @bubble
+  end
+
   private
+    def comment_params
+      params.require(:comment).permit(:body)
+    end
+
     def new_comment
-      Comment.new params.expect(comment: [ :body ])
+      Comment.new(comment_params)
+    end
+
+    def set_comment
+      @comment = Comment.joins(:message)
+                        .where(messages: { bubble_id: @bubble.id })
+                        .find(params[:id])
     end
 end

app/models/concerns/messageable.rb

@@ -4,7 +4,7 @@ module Messageable
   TYPES = %w[ Comment EventSummary ]
 
   included do
-    has_one :message, as: :messageable, touch: true
+    has_one :message, as: :messageable, touch: true, dependent: :destroy
     has_one :bubble, through: :message
   end
 end

app/views/bubbles/_bubble.html.erb

@@ -6,12 +6,16 @@
 
     <div>
       <h1 class="bubble__title">
-        <%= turbo_frame_tag bubble, :edit do %>
-          <%= link_to bubble.title, edit_bucket_bubble_path(bubble.bucket, bubble), class: "txt-undecorated" %>
+        <% if local_assigns[:editing] %>
+          <%= turbo_frame_tag bubble, :edit, src: edit_bucket_bubble_path(bubble.bucket, bubble) %>
+        <% else %>
+          <%= turbo_frame_tag bubble, :edit do %>
+            <%= link_to bubble.title, edit_bucket_bubble_path(bubble.bucket, bubble), class: "txt-undecorated" %>
 
-          <div class="bubble__tags flex flex-wrap align-end justify-center gap-half txt-tight-lines">
-            <%= render "bubbles/tags", bubble: bubble %>
-          </div>
+            <div class="bubble__tags flex flex-wrap align-end justify-center gap-half txt-tight-lines">
+              <%= render "bubbles/tags", bubble: bubble %>
+            </div>
+          <% end %>
         <% end %>
       </h1>
     </div>

app/views/bubbles/show.html.erb

@@ -61,7 +61,7 @@
 
 <div class="bubble__container">
   <div class="bubble__perma flex justify-center center margin-block-end-double">
-    <%= render "bubbles/bubble", bubble: @bubble %>
+    <%= render "bubbles/bubble", bubble: @bubble, editing: params[:editing] %>
   </div>
 
   <%= render "bubbles/messages", bubble: @bubble %>

app/views/comments/_comment.html.erb

@@ -3,17 +3,5 @@
     <%= avatar_tag comment.creator, loading: :lazy %>
   </figure>
 
-  <div class="comment__content flex-inline flex-column full-width border border-radius">
-    <div class="comment__author flex align-center gap-half">
-      <strong><%= comment.creator.name %></strong>
-      <%= link_to bucket_bubble_path(comment.bubble.bucket, comment.bubble, anchor: "comment_#{comment.id}"), class: "txt-undecorated" do %>
-        <%= tag.time comment.created_at, class: "comment__timestamp" do %>
-          <%= comment.created_at.strftime("%b %d") %>
-        <% end %>
-      <% end %>
-    </div>
-    <div class="comment__body txt-align-start">
-      <%= sanitize comment.body_html %>
-    </div>
-  </div>
+  <%= turbo_frame_tag dom_id(comment), src: bucket_bubble_comment_path(comment.bubble.bucket, comment.bubble, comment) %>
 <% end %>

app/views/comments/edit.html.erb

@@ -0,0 +1,26 @@
+<%= turbo_frame_tag dom_id(@comment) do %>
+  <div class="comment__content flex-inline flex-column full-width border border-radius" style="background-color: var(--color-selected);">
+    <%= form_with model: [@bubble.bucket, @bubble, @comment], class: "flex flex-column gap full-width",
+          data: { controller: "form", action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel" } do |form| %>
+      <%= form.text_area :body, class: "input comment__input", required: true, rows: 3 %>
+      <div class="flex gap-half justify-start">
+        <%= form.button class: "btn btn--reversed txt-small", type: :submit do %>
+          <%= image_tag "check.svg", aria: { hidden: true }, size: 16 %>
+          <span class="for-screen-reader">Save</span>
+        <% end %>
+        <%= link_to bucket_bubble_comment_path(@bubble.bucket, @bubble, @comment), class: "btn btn--small", data: { form_target: "cancel" } do %>
+          <%= image_tag "close.svg", aria: { hidden: true }, size: 16 %>
+          <span class="for-screen-reader">Cancel</span>
+        <% end %>
+
+        <%= tag.button type: :submit, class: "btn btn--small btn--negative flex-item-justify-end", form: dom_id(@comment, :delete_form),
+            data: { turbo_confirm: "Are you sure you want to delete this comment?" } do %>
+          <%= image_tag "remove.svg", aria: { hidden: true }, size: 16 %>
+          <span class="for-screen-reader">Delete</span>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= form_with url: bucket_bubble_comment_path(@bubble.bucket, @bubble, @comment), method: :delete, id: dom_id(@comment, :delete_form), data: { turbo_frame: "_top" } %>
+  </div>
+<% end %>

app/views/comments/show.html.erb

@@ -0,0 +1,22 @@
+<%= turbo_frame_tag dom_id(@comment) do %>
+  <div class="comment__content flex-inline flex-column full-width border border-radius">
+    <div class="comment__author flex align-center gap-half">
+      <strong><%= @comment.creator.name %></strong>
+      <%= link_to bucket_bubble_path(@comment.bubble.bucket, @comment.bubble, anchor: "comment_#{@comment.id}"), class: "txt-undecorated" do %>
+        <%= tag.time @comment.created_at, class: "comment__timestamp" do %>
+          <%= @comment.created_at.strftime("%b %d") %>
+        <% end %>
+      <% end %>
+
+      <% if @comment.creator == Current.user %>
+        <%= link_to edit_bucket_bubble_comment_path(@comment.bubble.bucket, @comment.bubble, @comment), class: "btn txt-small btn--plain", style: "font-size: 0.4em; opacity: 0.5;" do %>
+          <%= image_tag "menu-dots-horizontal.svg", class: "icon" %>
+          <span class="for-screen-reader">Edit</span>
+        <% end %>
+      <% end %>
+    </div>
+    <div class="comment__body txt-align-start">
+      <%= simple_format @comment.body %>
+    </div>
+  </div>
+<% end %>

test/controllers/bubbles_controller_test.rb

@@ -19,7 +19,7 @@ class BubblesControllerTest < ActionDispatch::IntegrationTest
     assert_difference "Bubble.count", 1 do
       post bucket_bubbles_url(buckets(:writebook))
     end
-    assert_redirected_to bucket_bubble_url(buckets(:writebook), Bubble.last)
+    assert_redirected_to bucket_bubble_url(buckets(:writebook), Bubble.last, editing: true)
   end
 
   test "show" do