Wire up editing comments

app/controllers/comments_controller.rb

@@ -1,13 +1,35 @@
 class CommentsController < ApplicationController
   include BubbleScoped, BucketScoped
+  before_action :set_comment, only: [ :show, :edit, :update ]
 
   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
+
   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/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">
-      <%= simple_format comment.body %>
-    </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,17 @@
+<%= 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" 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 %>
+      </div>
+    <% end %>
+  </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 %>