coplan-engine 0.1.3 → 0.2.0

data/app/javascript/controllers/coplan/comment_nav_controller.js

@@ -0,0 +1,134 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["position", "resolvedToggle"]
+  static values = { planId: String }
+
+  connect() {
+    this.currentIndex = -1
+    this.updatePosition()
+    this.handleKeydown = this.handleKeydown.bind(this)
+    document.addEventListener("keydown", this.handleKeydown)
+  }
+
+  disconnect() {
+    document.removeEventListener("keydown", this.handleKeydown)
+  }
+
+  handleKeydown(event) {
+    // Don't intercept when typing in inputs/textareas or when modifier keys are held
+    const tag = event.target.tagName
+    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || event.target.isContentEditable) return
+    if (event.metaKey || event.ctrlKey || event.altKey) return
+
+    switch (event.key) {
+      case "j":
+      case "ArrowDown":
+        event.preventDefault()
+        this.next()
+        break
+      case "k":
+      case "ArrowUp":
+        event.preventDefault()
+        this.prev()
+        break
+      case "r":
+        event.preventDefault()
+        this.focusReply()
+        break
+    }
+  }
+
+  get openHighlights() {
+    return Array.from(document.querySelectorAll("mark.anchor-highlight--open"))
+  }
+
+  get allHighlights() {
+    return Array.from(document.querySelectorAll("mark.anchor-highlight"))
+  }
+
+  next() {
+    const highlights = this.openHighlights
+    if (highlights.length === 0) return
+
+    this.currentIndex = (this.currentIndex + 1) % highlights.length
+    this.navigateTo(highlights[this.currentIndex])
+  }
+
+  prev() {
+    const highlights = this.openHighlights
+    if (highlights.length === 0) return
+
+    this.currentIndex = this.currentIndex <= 0 ? highlights.length - 1 : this.currentIndex - 1
+    this.navigateTo(highlights[this.currentIndex])
+  }
+
+  navigateTo(mark) {
+    // Remove active highlight from all marks
+    document.querySelectorAll(".anchor-highlight--active").forEach(el => {
+      el.classList.remove("anchor-highlight--active")
+    })
+
+    // Add active class and scroll into view
+    mark.classList.add("anchor-highlight--active")
+    mark.scrollIntoView({ behavior: "smooth", block: "center" })
+
+    // Open the thread popover if there's one
+    const threadId = mark.dataset.threadId
+    if (threadId) {
+      const popover = document.getElementById(`${threadId}_popover`)
+      if (popover) {
+        const markRect = mark.getBoundingClientRect()
+        popover.showPopover()
+        popover.style.top = `${markRect.top}px`
+        popover.style.left = `${markRect.right + 12}px`
+      }
+    }
+
+    this.updatePosition()
+  }
+
+  focusReply() {
+    let openPopover
+    try {
+      openPopover = document.querySelector(".thread-popover:popover-open")
+    } catch {
+      // :popover-open not supported — find the visible popover manually
+      openPopover = Array.from(document.querySelectorAll(".thread-popover[popover]"))
+        .find(el => el.checkVisibility?.())
+    }
+    if (!openPopover) return
+
+    const textarea = openPopover.querySelector(".thread-popover__reply textarea")
+    if (textarea) {
+      textarea.focus({ preventScroll: true })
+    }
+  }
+
+  toggleResolved() {
+    const planLayout = document.querySelector(".plan-layout")
+    if (!planLayout) return
+
+    if (this.resolvedToggleTarget.checked) {
+      planLayout.classList.add("plan-layout--show-resolved")
+    } else {
+      planLayout.classList.remove("plan-layout--show-resolved")
+    }
+  }
+
+  updatePosition() {
+    if (!this.hasPositionTarget) return
+
+    const highlights = this.openHighlights
+    if (highlights.length === 0) {
+      this.positionTarget.textContent = ""
+      return
+    }
+
+    if (this.currentIndex < 0) {
+      this.positionTarget.textContent = `${highlights.length} total`
+    } else {
+      this.positionTarget.textContent = `${this.currentIndex + 1} of ${highlights.length}`
+    }
+  }
+}

data/app/javascript/controllers/coplan/text_selection_controller.js

@@ -1,7 +1,7 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["content", "popover", "form", "anchorInput", "contextInput", "occurrenceInput", "anchorPreview", "anchorQuote"]
+  static targets = ["content", "popover", "form", "anchorInput", "contextInput", "occurrenceInput", "anchorPreview", "anchorQuote", "margin", "threads"]
   static values = { planId: String }
 
   connect() {
@@ -9,13 +9,21 @@ export default class extends Controller {
     this.contentTarget.addEventListener("mouseup", this.handleMouseUp.bind(this))
     document.addEventListener("mousedown", this.handleDocumentMouseDown.bind(this))
     this.highlightAnchors()
-    this.observeThreadLists()
+
+    // Watch for broadcast-appended threads and re-highlight
+    if (this.hasThreadsTarget) {
+      this._threadsObserver = new MutationObserver(() => this.highlightAnchors())
+      this._threadsObserver.observe(this.threadsTarget, { childList: true })
+    }
   }
 
   disconnect() {
     this.contentTarget.removeEventListener("mouseup", this.handleMouseUp.bind(this))
     document.removeEventListener("mousedown", this.handleDocumentMouseDown.bind(this))
-    if (this.threadListObserver) this.threadListObserver.disconnect()
+    if (this._threadsObserver) {
+      this._threadsObserver.disconnect()
+      this._threadsObserver = null
+    }
   }
 
   handleMouseUp(event) {
@@ -72,14 +80,9 @@ export default class extends Controller {
       : this.selectedText
     this.anchorPreviewTarget.style.display = "block"
 
-    // Position the form in the sidebar at the same vertical level as the selection
-    const layoutRect = this.element.getBoundingClientRect()
-    const popoverRect = this.popoverTarget.getBoundingClientRect()
-    const offsetTop = popoverRect.top - layoutRect.top
-    this.formTarget.style.position = "absolute"
-    this.formTarget.style.top = `${offsetTop}px`
-
-    // Show form, hide popover
+    // Position form where the popover was, then show it
+    this.formTarget.style.top = this.popoverTarget.style.top
+    this.formTarget.style.left = this.popoverTarget.style.left
     this.formTarget.style.display = "block"
     this.popoverTarget.style.display = "none"
 
@@ -129,7 +132,6 @@ export default class extends Controller {
     const anchor = event.currentTarget.dataset.anchor
     if (!anchor) return
 
-    const context = event.currentTarget.closest("[data-anchor-context]")?.dataset.anchorContext || ""
     const occurrence = event.currentTarget.dataset.anchorOccurrence
 
     // Remove existing highlights first
@@ -140,13 +142,55 @@ export default class extends Controller {
     // Build full text for position lookups
     this.fullText = this.contentTarget.textContent
 
-    // Find and highlight using occurrence index (most reliable), then context, then first match
-    const highlighted = this.findAndHighlightForThread(anchor, context, occurrence, "anchor-highlight--active", null)
+    const highlighted = this.findAndHighlight(anchor, occurrence, "anchor-highlight--active")
     if (highlighted) {
       highlighted.scrollIntoView({ behavior: "smooth", block: "center" })
     }
   }
 
+  openThreadPopover(event) {
+    const threadId = event.currentTarget.dataset.threadId
+    if (!threadId) return
+
+    const popover = document.getElementById(`${threadId}_popover`)
+    if (!popover) return
+
+    // Position the popover near the clicked element
+    const trigger = event.currentTarget
+    const triggerRect = trigger.getBoundingClientRect()
+
+    // Hide visually while positioning to prevent flash
+    popover.style.visibility = "hidden"
+    popover.showPopover()
+
+    // Position after showing (popover needs to be in top layer first)
+    const popoverRect = popover.getBoundingClientRect()
+    const viewportWidth = window.innerWidth
+    const viewportHeight = window.innerHeight
+
+    // Default: right of the content area, aligned with the trigger
+    let top = triggerRect.top
+    let left = triggerRect.right + 12
+
+    // If it would overflow right, position to the left
+    if (left + popoverRect.width > viewportWidth - 16) {
+      left = triggerRect.left - popoverRect.width - 12
+    }
+
+    // If it would overflow bottom, shift up
+    if (top + popoverRect.height > viewportHeight - 16) {
+      top = viewportHeight - popoverRect.height - 16
+    }
+
+    // Ensure it doesn't go outside viewport
+    if (top < 16) top = 16
+    if (left < 16) left = 16
+
+    popover.style.top = `${top}px`
+    popover.style.left = `${left}px`
+    popover.style.visibility = "visible"
+  }
+
   extractContext(range, selectedText) {
     // Grab surrounding text for disambiguation
     const fullText = this.contentTarget.textContent
@@ -214,105 +258,63 @@ export default class extends Controller {
     })
     this.contentTarget.normalize()
 
+    // Clear margin dots
+    if (this.hasMarginTarget) {
+      this.marginTarget.innerHTML = ""
+    }
+
     // Build full text once for position lookups
     this.fullText = this.contentTarget.textContent
 
     const threads = this.element.querySelectorAll("[data-anchor-text]")
     threads.forEach(thread => {
       const anchor = thread.dataset.anchorText
-      const context = thread.dataset.anchorContext
       const occurrence = thread.dataset.anchorOccurrence
+      const status = thread.dataset.threadStatus || "pending"
+      const threadId = thread.id
+
       if (anchor && anchor.length > 0) {
-        this.findAndHighlightForThread(anchor, context, occurrence, "anchor-highlight", thread)
+        const isOpen = status === "pending" || status === "todo"
+        const statusClass = isOpen ? "anchor-highlight--open" : "anchor-highlight--resolved"
+        const mark = this.findAndHighlight(anchor, occurrence, `anchor-highlight ${statusClass}`)
+
+        if (mark && threadId) {
+          // Make highlight clickable to open popover
+          mark.dataset.threadId = threadId
+          mark.style.cursor = "pointer"
+          mark.addEventListener("click", (e) => this.openThreadPopover(e))
+
+          // Create margin dot
+          if (this.hasMarginTarget) {
+            this.createMarginDot(mark, threadId, status)
+          }
+        }
       }
     })
-
-    this.positionThreads()
-  }
-
-  // Re-highlight and reposition when threads are added/removed via turbo stream broadcasts
-  observeThreadLists() {
-    this.threadListObserver = new MutationObserver(() => {
-      // Debounce — multiple mutations may fire in quick succession
-      clearTimeout(this._repositionTimer)
-      this._repositionTimer = setTimeout(() => this.highlightAnchors(), 50)
-    })
-
-    this.element.querySelectorAll(".comment-threads-list").forEach(list => {
-      this.threadListObserver.observe(list, { childList: true })
-    })
-  }
-
-  repositionThreads() {
-    // Small delay to let the tab panel become visible before measuring positions
-    setTimeout(() => this.positionThreads(), 10)
-  }
-
-  positionThreads() {
-    const sidebar = this.element.querySelector(".plan-layout__sidebar")
-    if (!sidebar) return
-
-    // Pause observer while reordering DOM to avoid triggering a rehighlight loop
-    if (this.threadListObserver) this.threadListObserver.disconnect()
-
-    this.positionThreadList("#comment-threads", sidebar)
-    this.positionThreadList("#resolved-comment-threads", sidebar)
-
-    // Re-observe after reordering
-    if (this.threadListObserver) {
-      this.element.querySelectorAll(".comment-threads-list").forEach(list => {
-        this.threadListObserver.observe(list, { childList: true })
-      })
-    }
   }
 
-  positionThreadList(selector, sidebar) {
-    const threadList = this.element.querySelector(selector)
-    if (!threadList) return
-
-    const threads = Array.from(threadList.querySelectorAll(".comment-thread"))
-    if (threads.length === 0) return
-
-    const sidebarRect = sidebar.getBoundingClientRect()
-
-    // Sort threads by their anchor's vertical position in the document
-    threads.sort((a, b) => {
-      const markA = a._highlightMark
-      const markB = b._highlightMark
-      const yA = markA ? markA.getBoundingClientRect().top : Infinity
-      const yB = markB ? markB.getBoundingClientRect().top : Infinity
-      return yA - yB
-    })
-
-    // Reorder DOM within this list only
-    threads.forEach(thread => threadList.appendChild(thread))
-
-    // Position threads vertically
-    const gap = 8
-    let cursor = 0
-
-    threads.forEach(thread => {
-      const mark = thread._highlightMark
-      let desiredY = cursor
-
-      if (mark) {
-        desiredY = mark.getBoundingClientRect().top - sidebarRect.top + sidebar.scrollTop
-      }
-
-      const y = Math.max(desiredY, cursor)
-      thread.style.marginTop = `${y - cursor}px`
-      cursor = y + thread.offsetHeight + gap
-    })
+  createMarginDot(highlightMark, threadId, status) {
+    const contentRect = this.contentTarget.getBoundingClientRect()
+    const markRect = highlightMark.getBoundingClientRect()
+    const marginRect = this.marginTarget.getBoundingClientRect()
+
+    const dot = document.createElement("button")
+    const isOpen = status === "pending" || status === "todo"
+    dot.className = `margin-dot margin-dot--${isOpen ? "open" : "resolved"}`
+    dot.style.top = `${markRect.top - marginRect.top}px`
+    dot.dataset.threadId = threadId
+    dot.addEventListener("click", (e) => this.openThreadPopover(e))
+    dot.title = `${status} comment`
+
+    this.marginTarget.appendChild(dot)
   }
 
-  // Primary highlight method: uses occurrence index (from server-side OT positions)
-  // to find the correct Nth occurrence of anchor text in the rendered DOM.
-  // Falls back to context matching, then to first occurrence.
-  findAndHighlightForThread(text, context, occurrence, className, threadEl) {
+  // Find and highlight the Nth occurrence of text in the rendered DOM.
+  // Uses the occurrence index from server-side positional data.
+  findAndHighlight(text, occurrence, className) {
     const fullText = this.fullText
     let targetIndex = -1
 
-    // Strategy 1: Use the occurrence index from the server (most reliable)
     if (occurrence !== undefined && occurrence !== "") {
       const occurrenceNum = parseInt(occurrence, 10)
       if (!isNaN(occurrenceNum)) {
@@ -320,27 +322,9 @@ export default class extends Controller {
       }
     }
 
-    // Strategy 2: Fall back to context matching
-    if (targetIndex === -1 && context && context.length > 0) {
-      const contextIndex = fullText.indexOf(context)
-      if (contextIndex !== -1) {
-        targetIndex = fullText.indexOf(text, contextIndex)
-        if (targetIndex === -1 || targetIndex > contextIndex + context.length) {
-          targetIndex = fullText.indexOf(text)
-        }
-      }
-    }
-
-    // Strategy 3: Fall back to first occurrence
-    if (targetIndex === -1) {
-      targetIndex = fullText.indexOf(text)
-    }
-
     if (targetIndex === -1) return null
 
-    const mark = this.highlightAtIndex(targetIndex, text.length, className)
-    if (mark && threadEl) threadEl._highlightMark = mark
-    return mark
+    return this.highlightAtIndex(targetIndex, text.length, className)
   }
 
   findNthOccurrence(text, search, n) {
@@ -352,43 +336,6 @@ export default class extends Controller {
     return pos
   }
 
-  findAndHighlightWithContext(text, context, className) {
-    // Use context to find the right occurrence of the anchor text
-    const fullText = this.fullText
-    let targetIndex
-
-    if (context && context.length > 0) {
-      const contextIndex = fullText.indexOf(context)
-      if (contextIndex !== -1) {
-        // Find the anchor text within the context region
-        targetIndex = fullText.indexOf(text, contextIndex)
-        if (targetIndex === -1 || targetIndex > contextIndex + context.length) {
-          targetIndex = fullText.indexOf(text) // fallback
-        }
-      } else {
-        targetIndex = fullText.indexOf(text)
-      }
-    } else {
-      targetIndex = fullText.indexOf(text)
-    }
-
-    if (targetIndex === -1) return null
-
-    // Find the thread element to store the mark reference
-    const threads = this.element.querySelectorAll(".comment-thread[data-anchor-text]")
-    let threadEl = null
-    for (const t of threads) {
-      if (t.dataset.anchorText === text && t.dataset.anchorContext === (context || "")) {
-        threadEl = t
-        break
-      }
-    }
-
-    const mark = this.highlightAtIndex(targetIndex, text.length, className)
-    if (mark && threadEl) threadEl._highlightMark = mark
-    return mark
-  }
-
   highlightAtIndex(startIndex, length, className) {
     if (startIndex < 0 || length <= 0) return null
 
@@ -433,13 +380,4 @@ export default class extends Controller {
 
     return firstHighlighted
   }
-
-  // Keep legacy method for scrollToAnchor (single-use highlight)
-  findAndHighlight(text, className) {
-    if (!text || text.length === 0) return null
-    const fullText = this.contentTarget.textContent
-    const index = fullText.indexOf(text)
-    if (index === -1) return null
-    return this.highlightAtIndex(index, text.length, className)
-  }
 }

data/app/jobs/coplan/automated_review_job.rb

@@ -46,7 +46,7 @@ module CoPlan
           plan_version: version,
           created_by_user: created_by,
           anchor_text: item[:anchor_text],
-          status: "open"
+          status: "pending"
         )
 
         thread.comments.create!(
@@ -60,10 +60,10 @@ module CoPlan
     end
 
     def broadcast_new_thread(plan, thread)
-      Broadcaster.prepend_to(
+      Broadcaster.append_to(
         plan,
-        target: "comment-threads",
-        partial: "coplan/comment_threads/thread",
+        target: "plan-threads",
+        partial: "coplan/comment_threads/thread_popover",
         locals: { thread: thread, plan: plan }
       )
     end

data/app/models/coplan/comment_thread.rb

@@ -1,6 +1,8 @@
 module CoPlan
   class CommentThread < ApplicationRecord
-    STATUSES = %w[open resolved accepted dismissed].freeze
+    STATUSES = %w[pending todo resolved discarded].freeze
+    OPEN_STATUSES = %w[pending todo].freeze
+    CLOSED_STATUSES = %w[resolved discarded].freeze
 
     attr_accessor :anchor_occurrence
 
@@ -16,10 +18,10 @@ module CoPlan
 
     before_create :resolve_anchor_position
 
-    scope :open_threads, -> { where(status: "open") }
+    scope :open_threads, -> { where(status: OPEN_STATUSES) }
     scope :current, -> { where(out_of_date: false) }
-    scope :active, -> { where(status: "open", out_of_date: false) }
-    scope :archived, -> { where("status != 'open' OR out_of_date = ?", true) }
+    scope :active, -> { where(status: OPEN_STATUSES, out_of_date: false) }
+    scope :archived, -> { where("status NOT IN (?) OR out_of_date = ?", OPEN_STATUSES, true) }
 
     # Transforms anchor positions through intervening version edits using OT.
     # Threads without positional data (anchor_start/anchor_end/anchor_revision)
@@ -94,11 +96,15 @@ module CoPlan
     end
 
     def accept!(user)
-      update!(status: "accepted", resolved_by_user: user)
+      update!(status: "todo", resolved_by_user: user)
     end
 
-    def dismiss!(user)
-      update!(status: "dismissed", resolved_by_user: user)
+    def discard!(user)
+      update!(status: "discarded", resolved_by_user: user)
+    end
+
+    def open?
+      OPEN_STATUSES.include?(status)
     end
 
     def anchor_valid?

data/app/policies/coplan/comment_thread_policy.rb

@@ -12,7 +12,7 @@ module CoPlan
       record.plan.created_by_user_id == user.id
     end
 
-    def dismiss?
+    def discard?
       record.plan.created_by_user_id == user.id
     end
 

data/app/views/coplan/comment_threads/_new_comment_form.html.erb

@@ -8,7 +8,8 @@
       <blockquote class="comment-form__quote" data-coplan--text-selection-target="anchorQuote"></blockquote>
     </div>
     <div class="form-group">
-      <textarea name="comment_thread[body_markdown]" id="comment_thread_body_markdown" rows="3" placeholder="Write a comment..." required></textarea>
+      <textarea name="comment_thread[body_markdown]" id="comment_thread_body_markdown" rows="3" placeholder="Write a comment..." required
+        data-controller="coplan--comment-form" data-action="keydown->coplan--comment-form#submitOnEnter"></textarea>
     </div>
     <div class="comment-form__actions">
       <button type="submit" class="btn btn--primary btn--sm">Comment</button>

data/app/views/coplan/comment_threads/_reply_form.html.erb

@@ -1,7 +1,8 @@
 <div class="comment-thread__reply" id="<%= dom_id(thread, :reply_form) %>">
   <%= form_with url: plan_comment_thread_comments_path(plan, thread), method: :post, data: { action: "turbo:submit-end->coplan--text-selection#resetReplyForm" } do |f| %>
     <div class="form-group">
-      <textarea name="comment[body_markdown]" rows="2" placeholder="Reply..." required></textarea>
+      <textarea name="comment[body_markdown]" rows="2" placeholder="Reply..." required
+        data-controller="coplan--comment-form" data-action="keydown->coplan--comment-form#submitOnEnter"></textarea>
     </div>
     <button type="submit" class="btn btn--secondary btn--sm">Reply</button>
   <% end %>

data/app/views/coplan/comment_threads/_thread.html.erb

@@ -5,7 +5,7 @@
      data-thread-id="<%= thread.id %>">
   <div class="comment-thread__header">
     <div class="comment-thread__meta">
-      <span class="badge badge--<%= thread.status == 'open' ? 'live' : 'abandoned' %>"><%= thread.status %></span>
+      <span class="badge badge--<%= thread.open? ? 'live' : 'abandoned' %>"><%= thread.status %></span>
       <% if thread.out_of_date? %>
         <span class="badge badge--abandoned">out of date</span>
       <% end %>
@@ -26,16 +26,13 @@
   <% is_plan_author = viewer.nil? || plan.created_by_user_id == viewer.id %>
   <% is_thread_author = viewer.nil? || thread.created_by_user_id == viewer.id %>
 
-  <% if thread.status == "open" %>
+  <% if thread.open? %>
     <%= render partial: "coplan/comment_threads/reply_form", locals: { thread: thread, plan: plan } %>
 
     <div class="comment-thread__actions">
-      <% if is_plan_author || is_thread_author %>
-        <%= link_to "Resolve", resolve_plan_comment_thread_path(plan, thread), data: { turbo_method: :patch }, class: "btn btn--secondary btn--sm" %>
-      <% end %>
       <% if is_plan_author %>
         <%= link_to "Accept", accept_plan_comment_thread_path(plan, thread), data: { turbo_method: :patch }, class: "btn btn--secondary btn--sm" %>
-        <%= link_to "Dismiss", dismiss_plan_comment_thread_path(plan, thread), data: { turbo_method: :patch }, class: "btn btn--secondary btn--sm" %>
+        <%= link_to "Discard", discard_plan_comment_thread_path(plan, thread), data: { turbo_method: :patch }, class: "btn btn--secondary btn--sm" %>
       <% end %>
     </div>
   <% else %>

data/app/views/coplan/comment_threads/_thread_popover.html.erb

@@ -0,0 +1,58 @@
+<div class="thread-popover-data"
+     id="<%= dom_id(thread) %>"
+     data-anchor-text="<%= thread.anchor_text %>"
+     data-anchor-occurrence="<%= thread.anchor_occurrence_index %>"
+     data-thread-id="<%= thread.id %>"
+     data-thread-status="<%= thread.status %>">
+
+  <div popover="auto" id="<%= dom_id(thread) %>_popover" class="thread-popover">
+    <div class="thread-popover__header">
+      <span class="badge badge--<%= thread.open? ? 'live' : 'abandoned' %>"><%= thread.status %></span>
+      <% if thread.out_of_date? %>
+        <span class="badge badge--abandoned">out of date</span>
+      <% end %>
+    </div>
+
+    <% if thread.anchored? %>
+      <blockquote class="thread-popover__quote"><%= thread.anchor_preview %></blockquote>
+    <% end %>
+
+    <div class="thread-popover__comments" id="<%= dom_id(thread, :comments) %>">
+      <% thread.comments.each do |comment| %>
+        <%= render partial: "coplan/comments/comment", locals: { comment: comment } %>
+      <% end %>
+    </div>
+
+    <%# current_user may not be available during Turbo Stream broadcasts %>
+    <% viewer = local_assigns.fetch(:current_user, nil) %>
+    <% is_plan_author = viewer.nil? || plan.created_by_user_id == viewer&.id %>
+    <% is_thread_author = viewer.nil? || thread.created_by_user_id == viewer&.id %>
+
+    <% if thread.open? %>
+      <div class="thread-popover__reply">
+        <%= form_with url: plan_comment_thread_comments_path(plan, thread), method: :post, data: { action: "turbo:submit-end->coplan--text-selection#resetReplyForm" } do |f| %>
+          <div class="form-group">
+            <textarea name="comment[body_markdown]" rows="2" placeholder="Reply..." required
+              data-controller="coplan--comment-form" data-action="keydown->coplan--comment-form#submitOnEnter"></textarea>
+          </div>
+          <button type="submit" class="btn btn--secondary btn--sm">Reply</button>
+        <% end %>
+      </div>
+
+      <div class="thread-popover__actions">
+        <% if is_plan_author %>
+          <% if thread.status == "pending" %>
+            <%= button_to "Accept", accept_plan_comment_thread_path(plan, thread), method: :patch, class: "btn btn--secondary btn--sm" %>
+          <% end %>
+          <%= button_to "Discard", discard_plan_comment_thread_path(plan, thread), method: :patch, class: "btn btn--secondary btn--sm" %>
+        <% end %>
+      </div>
+    <% else %>
+      <% if is_plan_author || is_thread_author %>
+        <div class="thread-popover__actions">
+          <%= button_to "Reopen", reopen_plan_comment_thread_path(plan, thread), method: :patch, class: "btn btn--secondary btn--sm" %>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+</div>