collavre 0.5.0 → 0.7.0

data/app/javascript/controllers/share_modal_controller.js

@@ -0,0 +1,369 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["container"]
+
+  connect() {
+    if (!this.hasContainerTarget) {
+      this.globalContainer = document.createElement("div")
+      this.globalContainer.dataset.shareModalTarget = "container"
+      document.body.appendChild(this.globalContainer)
+    }
+
+    this.handleKeydown = this.handleKeydown.bind(this)
+    document.addEventListener("keydown", this.handleKeydown)
+    this.refreshTimer = null
+
+    this.checkOpenShareParam()
+  }
+
+  disconnect() {
+    document.removeEventListener("keydown", this.handleKeydown)
+    if (this.refreshTimer) clearTimeout(this.refreshTimer)
+    if (this.globalContainer) {
+      this.globalContainer.remove()
+    }
+  }
+
+  get container() {
+    return this.hasContainerTarget ? this.containerTarget : this.globalContainer
+  }
+
+  open(event) {
+    const btn = event.currentTarget
+    const sharesUrl = btn.dataset.shareModalUrlParam || btn.dataset.sharesUrl
+
+    if (!sharesUrl) {
+      console.error("share-modal: No shares URL provided")
+      return
+    }
+
+    this.currentSharesUrl = sharesUrl
+
+    fetch(sharesUrl, {
+      headers: { "Accept": "text/html" }
+    })
+      .then(r => r.text())
+      .then(html => {
+        this.container.innerHTML = html
+        this.#initializeModal()
+        this.#dispatchEvent("share-modal:opened")
+      })
+      .catch(err => {
+        console.error("share-modal: Failed to load modal", err)
+      })
+  }
+
+  close() {
+    const modal = document.getElementById("share-creative-modal")
+    if (modal) {
+      modal.style.display = "none"
+      document.body.classList.remove("no-scroll")
+    }
+    if (this.container) {
+      this.container.innerHTML = ""
+    }
+    this.#dispatchEvent("share-modal:closed")
+  }
+
+  handleKeydown(event) {
+    if (event.key === "Escape") {
+      const modal = document.getElementById("share-creative-modal")
+      if (modal && modal.style.display === "flex") {
+        this.close()
+      }
+    }
+  }
+
+  checkOpenShareParam() {
+    const params = new URLSearchParams(window.location.search)
+    if (params.get("open_share") === "true") {
+      const shareBtn = document.getElementById("share-creative-btn")
+      if (shareBtn) {
+        shareBtn.click()
+      }
+    }
+  }
+
+  // Private
+
+  get #errorFallbackMessage() {
+    const modal = document.getElementById("share-creative-modal")
+    return modal?.dataset?.errorMessage || "An error occurred"
+  }
+
+  #initializeModal() {
+    const modal = document.getElementById("share-creative-modal")
+    if (!modal) return
+
+    modal.style.display = "flex"
+    document.body.classList.add("no-scroll")
+
+    const closeBtn = document.getElementById("close-share-modal")
+    if (closeBtn) {
+      closeBtn.onclick = () => this.close()
+    }
+
+    modal.onclick = (e) => {
+      if (e.target === modal) this.close()
+    }
+
+    this.#initializeForm()
+    this.#initializeDeleteButtons()
+    this.#initializeInviteLink()
+  }
+
+  #initializeForm() {
+    const form = document.getElementById("share-creative-form")
+    if (!form) return
+
+    form.addEventListener("submit", (e) => {
+      e.preventDefault()
+      const formData = new FormData(form)
+      const email = formData.get("user_email")
+      const permission = formData.get("permission")
+      const submitBtn = form.querySelector("button[type='submit']")
+      if (submitBtn) submitBtn.disabled = true
+
+      // Optimistic UI: add a pending entry immediately
+      const pendingEl = this.#addPendingEntry(email, permission)
+
+      // Clear the email input
+      const emailInput = form.querySelector("#share-user-email")
+      if (emailInput) emailInput.value = ""
+      if (submitBtn) submitBtn.disabled = false
+
+      fetch(form.action, {
+        method: "POST",
+        headers: {
+          "Accept": "application/json",
+          "X-CSRF-Token": document.querySelector("meta[name='csrf-token']")?.content
+        },
+        body: formData
+      })
+        .then(r => r.json().then(data => ({ status: r.status, data })))
+        .then(({ status, data }) => {
+          if (pendingEl) pendingEl.remove()
+
+          if (status >= 200 && status < 300) {
+            this.#showMessage(data.notice, "success")
+            this.#debouncedRefresh()
+          } else {
+            this.#showMessage(data.error, "error")
+          }
+        })
+        .catch(() => {
+          if (pendingEl) pendingEl.remove()
+          this.#showMessage(this.#errorFallbackMessage, "error")
+        })
+    })
+  }
+
+  #addPendingEntry(email, permission) {
+    if (!email) return null
+    const modal = document.getElementById("share-creative-modal")
+    if (!modal) return null
+
+    let listSection = modal.querySelector(".share-grid")
+    if (!listSection) {
+      const popupBox = modal.querySelector(".popup-box")
+      if (!popupBox) return null
+      const section = document.createElement("div")
+      section.style.marginTop = "1em"
+      const strong = document.createElement("strong")
+      strong.textContent = "..."
+      section.appendChild(strong)
+      listSection = document.createElement("ul")
+      listSection.className = "share-grid"
+      section.appendChild(listSection)
+      popupBox.appendChild(section)
+    }
+
+    const li = document.createElement("li")
+    li.className = "share-modal-pending"
+
+    // Build DOM elements instead of innerHTML to avoid XSS
+    const avatarSpan = document.createElement("span")
+    const avatar = document.createElement("span")
+    avatar.className = "avatar share-avatar"
+    Object.assign(avatar.style, {
+      display: "inline-block", width: "20px", height: "20px",
+      borderRadius: "50%", background: "var(--surface-3,#ddd)",
+      textAlign: "center", lineHeight: "20px", fontSize: "10px"
+    })
+    avatar.textContent = email[0].toUpperCase()
+    avatarSpan.appendChild(avatar)
+
+    const emailSpan = document.createElement("span")
+    emailSpan.textContent = email
+
+    const permSpan = document.createElement("span")
+    permSpan.style.opacity = "0.5"
+    permSpan.textContent = permission
+
+    const spinnerSpan = document.createElement("span")
+    const spinner = document.createElement("span")
+    spinner.className = "share-modal-spinner"
+    spinnerSpan.appendChild(spinner)
+
+    li.append(avatarSpan, emailSpan, permSpan, spinnerSpan)
+    listSection.appendChild(li)
+    return li
+  }
+
+  #initializeDeleteButtons() {
+    const modal = document.getElementById("share-creative-modal")
+    if (!modal) return
+
+    const deleteForms = modal.querySelectorAll("form")
+    deleteForms.forEach(form => {
+      const methodInput = form.querySelector("input[name='_method'][value='delete']")
+      if (!methodInput) return
+
+      form.addEventListener("submit", (e) => {
+        e.preventDefault()
+
+        const confirmMessage = form.dataset.turboConfirm
+          || form.querySelector("button[type='submit']")?.dataset?.turboConfirm
+          || form.querySelector("button")?.dataset?.confirm
+        if (confirmMessage && !window.confirm(confirmMessage)) return
+
+        const listItem = form.closest("li")
+        if (listItem) {
+          listItem.style.opacity = "0.3"
+          listItem.style.pointerEvents = "none"
+        }
+
+        fetch(form.action, {
+          method: "DELETE",
+          headers: {
+            "Accept": "application/json",
+            "X-CSRF-Token": document.querySelector("meta[name='csrf-token']")?.content
+          }
+        })
+          .then(r => {
+            if (r.ok) {
+              if (listItem) listItem.remove()
+              this.#debouncedRefresh()
+            } else {
+              if (listItem) {
+                listItem.style.opacity = "1"
+                listItem.style.pointerEvents = ""
+              }
+              return r.json().then(data => {
+                this.#showMessage(data.error, "error")
+              })
+            }
+          })
+          .catch(() => {
+            if (listItem) {
+              listItem.style.opacity = "1"
+              listItem.style.pointerEvents = ""
+            }
+            this.#showMessage(this.#errorFallbackMessage, "error")
+          })
+      })
+    })
+  }
+
+  #debouncedRefresh() {
+    if (this.refreshTimer) clearTimeout(this.refreshTimer)
+    this.refreshTimer = setTimeout(() => this.#refreshModal(), 300)
+  }
+
+  #refreshModal() {
+    if (!this.currentSharesUrl) return
+
+    fetch(this.currentSharesUrl, {
+      headers: { "Accept": "text/html" }
+    })
+      .then(r => r.text())
+      .then(html => {
+        this.container.innerHTML = html
+        this.#initializeModal()
+      })
+      .catch(err => {
+        console.error("share-modal: Failed to refresh modal", err)
+      })
+  }
+
+  #showMessage(text, type) {
+    if (!text) return
+    const modal = document.getElementById("share-creative-modal")
+    if (!modal) return
+
+    const existing = modal.querySelector(".share-modal-message")
+    if (existing) existing.remove()
+
+    const msg = document.createElement("div")
+    msg.className = `share-modal-message share-modal-message-${type}`
+    msg.textContent = text
+
+    const title = modal.querySelector("h2")
+    if (title) {
+      title.insertAdjacentElement("afterend", msg)
+    } else {
+      modal.querySelector(".popup-box")?.prepend(msg)
+    }
+
+    setTimeout(() => msg.remove(), 4000)
+  }
+
+  #initializeInviteLink() {
+    const inviteLinkBtn = document.getElementById("creative-invite-link")
+    if (!inviteLinkBtn) return
+
+    inviteLinkBtn.onclick = () => {
+      const creativeId = inviteLinkBtn.dataset.creativeId
+      const permissionSelect = document.getElementById("share-permission")
+      const permission = permissionSelect ? permissionSelect.value : "read"
+      const permissionLabel = permissionSelect ? permissionSelect.options[permissionSelect.selectedIndex].text : ""
+      const noAccessMessage = inviteLinkBtn.dataset.noAccessMessage
+      const copiedTemplate = inviteLinkBtn.dataset.copiedTemplate
+
+      if (permission === "no_access") {
+        alert(noAccessMessage)
+        return
+      }
+
+      const emailInput = document.getElementById("share-user-email")
+      const email = emailInput ? emailInput.value.trim() : ""
+
+      fetch("/invite", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-CSRF-Token": document.querySelector("meta[name='csrf-token']")?.content
+        },
+        body: JSON.stringify({ creative_id: creativeId, permission, email: email || undefined })
+      })
+        .then(r => r.json())
+        .then(data => {
+          const plan42Copy = window.Plan42 && window.Plan42.copyTextToClipboard
+          let copyPromise = null
+          if (plan42Copy) {
+            copyPromise = plan42Copy(data.url)
+          } else if (navigator.clipboard && navigator.clipboard.writeText) {
+            copyPromise = navigator.clipboard.writeText(data.url)
+          }
+          if (copyPromise) {
+            copyPromise.then(() => {
+              this.#showMessage(copiedTemplate.replace("__PERMISSION__", permissionLabel), "success")
+            })
+          }
+          // Refresh modal to show the new invitation in the list
+          this.#debouncedRefresh()
+        })
+        .catch(err => {
+          console.error("Failed to create invite link", err)
+        })
+    }
+  }
+
+  #dispatchEvent(eventName) {
+    this.element.dispatchEvent(new CustomEvent(eventName, {
+      bubbles: true,
+      detail: {}
+    }))
+  }
+}

data/app/javascript/controllers/topic_search_controller.js

@@ -0,0 +1,103 @@
+import CommonPopupController from './common_popup_controller'
+
+export default class extends CommonPopupController {
+    static targets = ['input', 'list', 'close']
+
+    connect() {
+        super.connect()
+        this._debounceTimer = null
+        this._allTopics = []
+        this.inputTarget.addEventListener('input', this._onInput.bind(this))
+        this.inputTarget.addEventListener('keydown', this.handleInputKeydown.bind(this))
+        this.closeTarget.addEventListener('click', () => this.close())
+    }
+
+    disconnect() {
+        if (this._debounceTimer) {
+            clearTimeout(this._debounceTimer)
+            this._debounceTimer = null
+        }
+        super.disconnect()
+    }
+
+    openForCreative(creativeId, anchorRect, onSelectCallback, mainLabel = 'Main') {
+        this.onSelectCallback = onSelectCallback
+        this._allTopics = []
+        this.setItems([])
+        this.inputTarget.value = ''
+        super.open(anchorRect)
+
+        requestAnimationFrame(() => {
+            this.inputTarget.focus()
+        })
+
+        this._loadTopics(creativeId, mainLabel)
+    }
+
+    close() {
+        if (this._debounceTimer) {
+            clearTimeout(this._debounceTimer)
+            this._debounceTimer = null
+        }
+        super.close()
+    }
+
+    handleInputKeydown(event) {
+        if (this.handleKey(event)) return
+        if (event.key === 'Escape') {
+            this.close()
+        }
+    }
+
+    _onInput() {
+        const q = this.inputTarget.value.toLowerCase()
+        if (!q) {
+            this.setItems(this._allTopics)
+            return
+        }
+        const filtered = this._allTopics.filter(t =>
+            (t.label || '').toLowerCase().includes(q)
+        )
+        this.setItems(filtered)
+    }
+
+    async _loadTopics(creativeId, mainLabel) {
+        if (!creativeId) return
+        try {
+            const response = await fetch(`/creatives/${creativeId}/topics`, {
+                headers: { Accept: 'application/json' }
+            })
+            const data = await response.json()
+            const topics = data.topics || []
+
+            this._allTopics = [
+                { id: '', label: `📋 ${mainLabel}` },
+                ...topics.map(t => ({ id: t.id, label: `#${t.name}` }))
+            ]
+            this.setItems(this._allTopics)
+        } catch (error) {
+            console.error('Error loading topics:', error)
+            this.setItems([])
+        }
+    }
+
+    select(item) {
+        if (this.onSelectCallback) {
+            this.onSelectCallback(item)
+        }
+        this.close()
+    }
+
+    renderItem(item) {
+        const text = item.label || ''
+        return text
+            .replace(/&/g, "&")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+    }
+
+    dispatchClose(reason) {
+        this.onSelectCallback = null
+        super.dispatchClose(reason)
+    }
+}

data/app/javascript/creatives/drag_drop/event_handlers.js

@@ -24,7 +24,7 @@ import {
   hasDraggedState,
 } from './state';
 import { createMoveContext, applyMove, revertMove } from './operations';
-import { sendNewOrder, sendLinkedCreative } from '../../lib/api/drag_drop';
+import { sendNewOrder, sendLinkedCreative, sendTopicMove } from '../../lib/api/drag_drop';
 import { initIndicator, showLinkHover, hideLinkHover } from './indicator';
 
 const childZoneRatio = 0.3;
@@ -541,6 +541,17 @@ export function handleDragOver(event) {
     clearDragHighlight(lastRow);
   }
   if (!tree || tree.draggable === false) return;
+
+  // Topic move drag: always show as child drop target
+  if (event.dataTransfer.types.includes('application/x-topic-move')) {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+    tree.classList.add('drag-over', 'drag-over-child', 'child-drop-indicator-active');
+    tree.classList.remove('drag-over-top', 'drag-over-bottom');
+    setLastDragOverRow(tree);
+    return;
+  }
+
   event.preventDefault();
   event.dataTransfer.dropEffect = 'move';
 
@@ -600,6 +611,36 @@ export function handleDrop(event) {
   const targetTree = event.target.closest(DRAGGABLE_SELECTOR);
   const targetId = targetTree ? targetTree.id : '';
 
+  // Handle topic move drop
+  const topicMoveData = event.dataTransfer.getData('application/x-topic-move');
+  if (topicMoveData && targetTree) {
+    event.preventDefault();
+    clearDragHighlight(targetTree);
+    clearDragHighlight(getLastDragOverRow());
+
+    try {
+      const { topicId, sourceCreativeId } = JSON.parse(topicMoveData);
+      const targetCreativeId = targetId.replace('creative-', '');
+
+      if (sourceCreativeId === targetCreativeId) return;
+
+      sendTopicMove({ topicId, sourceCreativeId, targetCreativeId })
+        .then(() => {
+          // Dispatch event so topic list refreshes
+          window.dispatchEvent(new CustomEvent('collavre:topic-moved', {
+            detail: { topicId, sourceCreativeId, targetCreativeId }
+          }));
+        })
+        .catch((error) => {
+          console.error('Failed to move topic', error);
+          alert(error.message || 'Failed to move topic');
+        });
+    } catch (error) {
+      console.error('Failed to parse topic move data', error);
+    }
+    return;
+  }
+
   // Capture visual state before clearing highlights to ensure WYSIWYG
   const isVisualTop = targetTree && targetTree.classList.contains('drag-over-top');
   const isVisualBottom = targetTree && targetTree.classList.contains('drag-over-bottom');

data/app/javascript/lib/api/creatives.js

@@ -65,6 +65,17 @@ export function unconvert(id) {
   })
 }
 
+export function updateMetadata(id, data) {
+  const body = new FormData()
+  body.append('data', JSON.stringify(data))
+
+  return csrfFetch(`/creatives/${id}/update_metadata`, {
+    method: 'PATCH',
+    headers: JSON_HEADERS,
+    body,
+  })
+}
+
 const creativesApi = {
   get,
   parentSuggestions,
@@ -74,6 +85,7 @@ const creativesApi = {
   linkExisting,
   destroy,
   unconvert,
+  updateMetadata,
 }
 
 export default creativesApi

data/app/javascript/lib/api/csrf_fetch.js

@@ -5,6 +5,38 @@ function readCsrfToken() {
   return document.querySelector('meta[name="csrf-token"]')?.content || null
 }
 
+/**
+ * Update the page's CSRF meta tag with a fresh token from the server
+ * response header.  This keeps the client-side token in sync when the
+ * session cookie has been re-encrypted (e.g. after the browser was in
+ * the background and a GET request refreshed the cookie).
+ */
+export function updateCsrfTokenFromResponse(response) {
+  if (typeof document === 'undefined') return
+  const freshToken = response.headers.get('X-CSRF-Token')
+  if (!freshToken) return
+  const meta = document.querySelector('meta[name="csrf-token"]')
+  if (meta) meta.content = freshToken
+}
+
+/**
+ * Fetch a fresh CSRF token from the server.  Uses a lightweight HEAD
+ * request to the current page — the response body is discarded but the
+ * X-CSRF-Token header gives us a valid token.
+ */
+export async function refreshCsrfToken() {
+  try {
+    const response = await fetch(window.location.href, {
+      method: 'HEAD',
+      credentials: 'same-origin',
+    })
+    updateCsrfTokenFromResponse(response)
+    return readCsrfToken()
+  } catch {
+    return null
+  }
+}
+
 export default function csrfFetch(input, options = {}) {
   const { headers: incomingHeaders, credentials, ...rest } = options
   const headers = new Headers(incomingHeaders || undefined)
@@ -18,5 +50,8 @@ export default function csrfFetch(input, options = {}) {
     credentials: credentials ?? DEFAULT_CREDENTIALS,
     headers,
     ...rest,
+  }).then((response) => {
+    updateCsrfTokenFromResponse(response)
+    return response
   })
 }

data/app/javascript/lib/api/drag_drop.js

@@ -17,6 +17,23 @@ export function sendNewOrder({ draggedId, draggedIds, targetId, direction }) {
   });
 }
 
+export function sendTopicMove({ topicId, sourceCreativeId, targetCreativeId }) {
+  return csrfFetch(`/creatives/${sourceCreativeId}/topics/${topicId}/move`, {
+    method: 'PATCH',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ target_creative_id: targetCreativeId }),
+  }).then((response) => {
+    if (!response.ok) {
+      return response.json().then((data) => {
+        throw new Error(data.error || 'Failed to move topic');
+      });
+    }
+    return response.json();
+  });
+}
+
 export function sendLinkedCreative({ draggedId, targetId, direction }) {
   return csrfFetch('/creatives/link_drop', {
     method: 'POST',

data/app/javascript/modules/command_menu.js

@@ -35,6 +35,11 @@ if (!commandMenuInitialized) {
         `
       },
       onSelect: (command) => {
+        if (command.type === 'popup' && command.popup_type === 'creative_picker') {
+          openCreativePicker(textarea)
+          popupMenu.hide()
+          return
+        }
         insert(command)
         popupMenu.hide()
         textarea.focus()
@@ -92,6 +97,41 @@ if (!commandMenuInitialized) {
       popupMenu.showAt(caretRect)
     }
 
+    function openCreativePicker(textarea) {
+      const modal = document.getElementById('link-creative-modal')
+      if (!modal) return
+
+      const controller = window.Stimulus?.getControllerForElementAndIdentifier(modal, 'link-creative')
+      if (!controller) return
+
+      // Clear the command text (e.g. "/crea", "/creative") from textarea
+      const pos = textarea.selectionStart
+      const before = textarea.value.slice(0, pos)
+      const after = textarea.value.slice(pos)
+      const cleaned = before.replace(/^\/\S*\s*/, '')
+      textarea.value = cleaned + after
+      textarea.setSelectionRange(cleaned.length, cleaned.length)
+
+      const caretRect = getCaretClientRect(textarea) || textarea.getBoundingClientRect()
+      controller.open(
+        caretRect,
+        (item) => {
+          // Insert markdown link at cursor position
+          const link = `[${item.label}](/creatives/${item.id})`
+          const curPos = textarea.selectionStart
+          const beforeCur = textarea.value.slice(0, curPos)
+          const afterCur = textarea.value.slice(curPos)
+          textarea.value = beforeCur + link + ' ' + afterCur
+          const newPos = curPos + link.length + 1
+          textarea.setSelectionRange(newPos, newPos)
+          textarea.focus()
+        },
+        () => {
+          textarea.focus()
+        }
+      )
+    }
+
     textarea.addEventListener('keydown', function (event) {
       if (popupMenu.handleKey(event)) return
     })