coplan-engine 0.1.3 → 0.4.0

data/app/helpers/coplan/application_helper.rb

@@ -1,4 +1,48 @@
 module CoPlan
   module ApplicationHelper
+    FAVICON_COLORS = {
+      "production"  => { start: "#3B82F6", stop: "#1E40AF" },
+      "staging"     => { start: "#F59E0B", stop: "#D97706" },
+      "development" => { start: "#10B981", stop: "#047857" },
+    }.freeze
+
+    def coplan_favicon_tag
+      colors = FAVICON_COLORS.fetch(Rails.env, FAVICON_COLORS["development"])
+      svg = <<~SVG
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+          <defs>
+            <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+              <stop offset="0%" stop-color="#{colors[:start]}"/>
+              <stop offset="100%" stop-color="#{colors[:stop]}"/>
+            </linearGradient>
+          </defs>
+          <rect width="100" height="100" rx="22" fill="url(#g)"/>
+          <g opacity=".25" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round">
+            <line x1="16" y1="18" x2="84" y2="18"/>
+            <line x1="16" y1="28" x2="84" y2="28"/>
+            <line x1="16" y1="38" x2="84" y2="38"/>
+            <line x1="16" y1="48" x2="84" y2="48"/>
+            <line x1="16" y1="58" x2="84" y2="58"/>
+            <line x1="16" y1="68" x2="84" y2="68"/>
+            <line x1="16" y1="78" x2="84" y2="78"/>
+          </g>
+          <circle cx="40" cy="46" r="22" fill="#fff" opacity=".55"/>
+          <path d="M26,62 L18,78 L36,66 Z" fill="#fff" opacity=".55"/>
+          <circle cx="62" cy="54" r="22" fill="#fff" opacity=".55"/>
+          <path d="M76,70 L84,84 L68,72 Z" fill="#fff" opacity=".55"/>
+        </svg>
+      SVG
+
+      data_uri = "data:image/svg+xml,#{ERB::Util.url_encode(svg.strip)}"
+      tag.link(rel: "icon", type: "image/svg+xml", href: data_uri)
+    end
+
+    def coplan_environment_badge
+      return if Rails.env.production?
+
+      label = Rails.env.capitalize
+      colors = FAVICON_COLORS.fetch(Rails.env, FAVICON_COLORS["development"])
+      tag.span(label, class: "env-badge", style: "background: #{colors[:start]};")
+    end
   end
 end

data/app/helpers/coplan/markdown_helper.rb

@@ -11,6 +11,7 @@ module CoPlan
       blockquote hr br
       dd dt dl
       sup sub
+      details summary
     ].freeze
 
     ALLOWED_ATTRIBUTES = %w[id class href src alt title].freeze

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

@@ -0,0 +1,14 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  submitOnEnter(event) {
+    if (event.key !== "Enter") return
+    if (event.shiftKey || event.isComposing) return
+
+    const form = event.target.closest("form")
+    if (!form) return
+
+    event.preventDefault()
+    form.requestSubmit()
+  }
+}

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

@@ -0,0 +1,247 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["position", "resolvedToggle"]
+  static values = { planId: String }
+
+  connect() {
+    this.currentIndex = -1
+    this.activeMark = null
+    this.activePopover = null
+    this.updatePosition()
+    this.handleKeydown = this.handleKeydown.bind(this)
+    this.handleScroll = this.handleScroll.bind(this)
+    document.addEventListener("keydown", this.handleKeydown)
+    window.addEventListener("scroll", this.handleScroll, { passive: true })
+  }
+
+  disconnect() {
+    document.removeEventListener("keydown", this.handleKeydown)
+    window.removeEventListener("scroll", this.handleScroll)
+  }
+
+  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
+      case "a":
+        event.preventDefault()
+        this.acceptCurrent()
+        break
+      case "d":
+        event.preventDefault()
+        this.discardCurrent()
+        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")
+    })
+
+    // Close any currently open popover first — showPopover() throws
+    // InvalidStateError if the same popover is already open, and
+    // auto-dismiss only works when showing a *different* popover.
+    const openPopover = this.findOpenPopover()
+    if (openPopover) {
+      try { openPopover.hidePopover() } catch {}
+    }
+
+    // Add active class and scroll into view
+    mark.classList.add("anchor-highlight--active")
+    mark.scrollIntoView({ behavior: "instant", 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) {
+        popover.style.visibility = "hidden"
+        popover.showPopover()
+        this.positionPopoverAtMark(popover, mark)
+        popover.style.visibility = "visible"
+        this.activeMark = mark
+        this.activePopover = popover
+      }
+    }
+
+    this.updatePosition()
+  }
+
+  handleScroll() {
+    if (!this.activeMark || !this.activePopover) return
+    try {
+      if (!this.activePopover.matches(":popover-open")) {
+        this.activeMark = null
+        this.activePopover = null
+        return
+      }
+    } catch { return }
+    this.positionPopoverAtMark(this.activePopover, this.activeMark)
+  }
+
+  positionPopoverAtMark(popover, mark) {
+    const markRect = mark.getBoundingClientRect()
+    const popoverRect = popover.getBoundingClientRect()
+    const viewportWidth = window.innerWidth
+    const viewportHeight = window.innerHeight
+
+    let top = markRect.top
+    let left = markRect.right + 12
+
+    if (left + popoverRect.width > viewportWidth - 16) {
+      left = markRect.left - popoverRect.width - 12
+    }
+    if (top + popoverRect.height > viewportHeight - 16) {
+      top = viewportHeight - popoverRect.height - 16
+    }
+    if (top < 16) top = 16
+    if (left < 16) left = 16
+
+    popover.style.top = `${top}px`
+    popover.style.left = `${left}px`
+  }
+
+  focusReply() {
+    const popover = this.findOpenPopover()
+    if (!popover) return
+
+    const textarea = popover.querySelector(".thread-popover__reply textarea")
+    if (textarea) {
+      textarea.focus({ preventScroll: true })
+    }
+  }
+
+  acceptCurrent() {
+    this.submitPopoverAction("accept")
+  }
+
+  discardCurrent() {
+    this.submitPopoverAction("discard")
+  }
+
+  submitPopoverAction(action) {
+    const popover = this.findOpenPopover()
+    if (!popover) return
+
+    const form = popover.querySelector(`form[data-action-name='${action}']`)
+    if (!form) return
+
+    // Normalize currentIndex if popover was opened via mouse (not j/k)
+    if (this.currentIndex < 0) {
+      this.currentIndex = 0
+    }
+
+    // For accept (pending→todo), the thread stays open so we need to
+    // explicitly advance. For discard, the thread leaves openHighlights
+    // and the current index naturally points to the next one.
+    const shouldAdvance = action === "accept"
+
+    // Watch for the broadcast DOM update that replaces the thread data,
+    // then advance to the next thread once the highlights have changed.
+    const threadsContainer = document.getElementById("plan-threads")
+    if (threadsContainer) {
+      const observer = new MutationObserver(() => {
+        observer.disconnect()
+        this.advanceAfterAction(shouldAdvance)
+      })
+      observer.observe(threadsContainer, { childList: true, subtree: true })
+    }
+
+    form.requestSubmit()
+  }
+
+  advanceAfterAction(shouldAdvance) {
+    const highlights = this.openHighlights
+    if (highlights.length === 0) {
+      this.currentIndex = -1
+      this.updatePosition()
+      return
+    }
+    if (shouldAdvance) {
+      this.currentIndex = (this.currentIndex + 1) % highlights.length
+    } else if (this.currentIndex >= highlights.length) {
+      this.currentIndex = 0
+    }
+    this.navigateTo(highlights[this.currentIndex])
+  }
+
+  findOpenPopover() {
+    try {
+      return document.querySelector(".thread-popover:popover-open")
+    } catch {
+      return Array.from(document.querySelectorAll(".thread-popover[popover]"))
+        .find(el => el.checkVisibility?.())
+    }
+  }
+
+  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}`
+    }
+  }
+}