collavre 0.1.0

data/app/javascript/controllers/creatives/set_plan_modal_controller.js

@@ -0,0 +1,107 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['modal', 'form', 'idsInput', 'planSelect']
+  static values = {
+    selectOne: String,
+    selectPlan: String,
+  }
+
+  open(event) {
+    event.preventDefault()
+    if (!this.hasModalTarget) return
+    this.modalTarget.style.display = 'flex'
+    document.body.classList.add('no-scroll')
+  }
+
+  close(event) {
+    if (event) event.preventDefault()
+    if (!this.hasModalTarget) return
+    this.modalTarget.style.display = 'none'
+    document.body.classList.remove('no-scroll')
+  }
+
+  backdrop(event) {
+    if (event.target === this.modalTarget) {
+      this.close(event)
+    }
+  }
+
+  async submit(event) {
+    event.preventDefault()
+    if (!this.hasFormTarget || !this.hasIdsInputTarget) return
+    const ids = this.selectedIds()
+
+    if (ids.length === 0) {
+      this.alert(this.selectOneValue)
+      return
+    }
+
+    const planId = this.planSelectTarget.value
+    if (!planId) {
+      this.alert(this.selectPlanValue)
+      return
+    }
+
+    await this.performRequest(this.formTarget.action, 'POST', {
+      plan_id: planId,
+      creative_ids: ids.join(',')
+    })
+  }
+
+  async remove(event) {
+    event.preventDefault()
+    const ids = this.selectedIds()
+    if (ids.length === 0) {
+      this.alert(this.selectOneValue)
+      return
+    }
+
+    const planId = this.planSelectTarget.value
+    if (!planId) {
+      this.alert(this.selectPlanValue)
+      return
+    }
+
+    await this.performRequest(event.currentTarget.dataset.removePath, 'DELETE', {
+      plan_id: planId,
+      creative_ids: ids.join(',')
+    })
+  }
+
+  async performRequest(url, method, body) {
+    try {
+      const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content
+      const response = await fetch(url, {
+        method: method,
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json',
+          'X-CSRF-Token': csrfToken
+        },
+        body: JSON.stringify(body)
+      })
+
+      if (response.ok) {
+        const data = await response.json()
+        this.alert(data.message)
+        this.close()
+      } else {
+        const data = await response.json()
+        this.alert(data.error || 'Operation failed')
+      }
+    } catch (error) {
+      console.error(error)
+      this.alert('An unexpected error occurred.')
+    }
+  }
+
+  selectedIds() {
+    return Array.from(document.querySelectorAll('.select-creative-checkbox:checked')).map((checkbox) => checkbox.value)
+  }
+
+  alert(message) {
+    if (!message) return
+    window.alert(message)
+  }
+}

data/app/javascript/controllers/creatives/tree_controller.js

@@ -0,0 +1,218 @@
+import { Controller } from '@hotwired/stimulus'
+import { renderCreativeTree, dispatchCreativeTreeUpdated } from '../../creatives/tree_renderer'
+
+export default class extends Controller {
+  static values = {
+    url: String,
+    emptyHtml: String,
+  }
+
+  connect() {
+    this.abortController = null
+    this.loadingIndicator = null
+    this.handleResize = this.updateAlignmentOffset.bind(this)
+    this.handleTreeUpdated = () => this.queueAlignmentUpdate()
+    document.documentElement.classList.remove('creative-alignment-ready')
+    if (!this.hasCachedContent()) {
+      this.load()
+    }
+    this.queueAlignmentUpdate()
+    window.addEventListener('resize', this.handleResize)
+    this.element.addEventListener('creative-tree:updated', this.handleTreeUpdated)
+  }
+
+  disconnect() {
+    if (this.abortController) {
+      this.abortController.abort()
+      this.abortController = null
+    }
+    window.removeEventListener('resize', this.handleResize)
+    this.element.removeEventListener('creative-tree:updated', this.handleTreeUpdated)
+  }
+
+  load() {
+    if (!this.hasUrlValue) return
+
+    if (this.abortController) {
+      this.abortController.abort()
+    }
+    this.abortController = new AbortController()
+    this.showLoadingIndicator()
+
+    fetch(this.urlValue, {
+      headers: { Accept: 'application/json' },
+      signal: this.abortController.signal,
+    })
+      .then((response) => {
+        if (!response.ok) throw new Error(`Failed to load creatives: ${response.status}`)
+        return response.json()
+      })
+      .then((data) => {
+        this.hideLoadingIndicator()
+        this.renderData(data)
+      })
+      .catch((error) => {
+        if (error.name === 'AbortError') return
+        console.error(error)
+        this.hideLoadingIndicator()
+        this.showEmptyState()
+      })
+  }
+
+  renderData(data) {
+    const nodes = Array.isArray(data?.creatives) ? data.creatives : []
+
+    if (nodes.length === 0) {
+      this.showEmptyState()
+      dispatchCreativeTreeUpdated(this.element)
+      return
+    }
+
+    renderCreativeTree(this.element, nodes)
+    this.markContentLoaded()
+    dispatchCreativeTreeUpdated(this.element)
+    this.queueAlignmentUpdate()
+  }
+
+  showEmptyState() {
+    const html = this.hasEmptyHtmlValue ? this.emptyHtmlValue : ''
+    this.element.innerHTML = html
+    this.markContentLoaded()
+    document.documentElement.classList.add('creative-alignment-ready')
+  }
+
+  showLoadingIndicator() {
+    if (!this.loadingIndicator) {
+      const indicator = document.createElement('div')
+      indicator.className = 'creative-tree-loading-placeholder'
+      indicator.setAttribute('role', 'status')
+      indicator.setAttribute('aria-live', 'polite')
+      indicator.setAttribute('aria-label', 'Loading creatives')
+      indicator.innerHTML = `
+        <span class="creative-loading-indicator" aria-hidden="true">
+          <span class="creative-loading-dot">.</span>
+          <span class="creative-loading-dot">.</span>
+          <span class="creative-loading-dot">.</span>
+        </span>
+      `
+      this.loadingIndicator = indicator
+    }
+    this.clearLoadedState()
+    this.element.innerHTML = ''
+    this.element.appendChild(this.loadingIndicator)
+    this.startAnimation()
+  }
+
+  hideLoadingIndicator() {
+    this.stopAnimation()
+    if (this.loadingIndicator && this.loadingIndicator.parentNode === this.element) {
+      this.element.removeChild(this.loadingIndicator)
+    }
+  }
+
+  startAnimation() {
+    if (this.animationInterval) return
+
+    const style = getComputedStyle(document.body)
+    let emojiString = style.getPropertyValue('--creative-loading-emojis').replace(/"/g, '').trim()
+
+    if (!emojiString) {
+      const rootStyle = getComputedStyle(document.documentElement)
+      emojiString = rootStyle.getPropertyValue('--creative-loading-emojis').replace(/"/g, '').trim()
+    }
+
+    const emojis = emojiString ? emojiString.split(',').map(e => e.trim()) : ['🎨', '💡', '🚀', '✨', '🧩', '🎲']
+
+    let emojiIndex = 0
+    let frame = 0 // 0: ..., 1: ..E, 2: .E., 3: E..
+
+    const updateDots = () => {
+      if (!this.loadingIndicator) return
+      const dots = this.loadingIndicator.querySelectorAll('.creative-loading-dot')
+      if (dots.length !== 3) return
+
+      const currentEmoji = emojis[emojiIndex]
+
+      switch (frame) {
+        case 0:
+          dots[0].textContent = '.'
+          dots[1].textContent = '.'
+          dots[2].textContent = '.'
+          break
+        case 1:
+          dots[0].textContent = '.'
+          dots[1].textContent = '.'
+          dots[2].textContent = currentEmoji
+          break
+        case 2:
+          dots[0].textContent = '.'
+          dots[1].textContent = currentEmoji
+          dots[2].textContent = '.'
+          break
+        case 3:
+          dots[0].textContent = currentEmoji
+          dots[1].textContent = '.'
+          dots[2].textContent = '.'
+          break
+      }
+
+      frame++
+      if (frame > 3) {
+        frame = 0
+        emojiIndex = (emojiIndex + 1) % emojis.length
+      }
+    }
+
+    this.animationInterval = setInterval(updateDots, 120)
+    updateDots() // Initial call
+  }
+
+  stopAnimation() {
+    if (this.animationInterval) {
+      clearInterval(this.animationInterval)
+      this.animationInterval = null
+    }
+  }
+
+  hasCachedContent() {
+    if (this.element.dataset.loaded !== 'true') return false
+    return Boolean(this.element.querySelector('creative-tree-row') || this.element.innerHTML.trim() !== '')
+  }
+
+  markContentLoaded() {
+    this.element.dataset.loaded = 'true'
+  }
+
+  clearLoadedState() {
+    delete this.element.dataset.loaded
+  }
+
+  updateAlignmentOffset() {
+    const actionsRow = document.querySelector('.creative-actions-row')
+    const title = document.querySelector('.page-title')
+    if (!actionsRow && !title) return false
+
+    const content = this.element.querySelector('.creative-tree .creative-content')
+    if (!content) return false
+
+    const parent = (actionsRow || title)?.parentElement
+    if (!parent) return false
+
+    const contentRect = content.getBoundingClientRect()
+    const parentRect = parent.getBoundingClientRect()
+    const offset = Math.max(0, Math.round(contentRect.left - parentRect.left))
+    document.documentElement.style.setProperty('--creative-row-text-offset', `${offset}px`)
+    document.documentElement.classList.add('creative-alignment-ready')
+    return true
+  }
+
+  queueAlignmentUpdate(retries = 5) {
+    if (retries <= 0) return
+    requestAnimationFrame(() => {
+      const updated = this.updateAlignmentOffset()
+      if (!updated) {
+        setTimeout(() => this.queueAlignmentUpdate(retries - 1), 100)
+      }
+    })
+  }
+}

data/app/javascript/controllers/index.js

@@ -0,0 +1,79 @@
+// Collavre Engine Controllers
+// Import all controllers
+import PopupMenuController from "./popup_menu_controller"
+import ProgressFilterController from "./progress_filter_controller"
+import CreativesImportController from "./creatives/import_controller"
+import CreativesSelectModeController from "./creatives/select_mode_controller"
+import CreativesDragDropController from "./creatives/drag_drop_controller"
+import CreativesExpansionController from "./creatives/expansion_controller"
+import CreativesRowEditorController from "./creatives/row_editor_controller"
+import CreativesTreeController from "./creatives/tree_controller"
+import CreativesSetPlanModalController from "./creatives/set_plan_modal_controller"
+import CommentsListController from "./comments/list_controller"
+import CommentsFormController from "./comments/form_controller"
+import CommentsPresenceController from "./comments/presence_controller"
+import CommentsMentionMenuController from "./comments/mention_menu_controller"
+import CommentsTopicsController from "./comments/topics_controller"
+import CommentsPopupController from "./comments/popup_controller"
+import ClickTargetController from "./click_target_controller"
+import TabsController from "./tabs_controller"
+import LinkCreativeController from "./link_creative_controller"
+import CommonPopupController from "./common_popup_controller"
+import CommentController from "./comment_controller"
+import ReactionPickerController from "./reaction_picker_controller"
+import ShareInviteController from "./share_invite_controller"
+import ShareUserSearchController from "./share_user_search_controller"
+
+// Export all controllers
+export {
+  PopupMenuController,
+  ProgressFilterController,
+  CreativesImportController,
+  CreativesSelectModeController,
+  CreativesDragDropController,
+  CreativesExpansionController,
+  CreativesRowEditorController,
+  CreativesTreeController,
+  CreativesSetPlanModalController,
+  CommentsListController,
+  CommentsFormController,
+  CommentsPresenceController,
+  CommentsMentionMenuController,
+  CommentsTopicsController,
+  CommentsPopupController,
+  ClickTargetController,
+  TabsController,
+  LinkCreativeController,
+  CommonPopupController,
+  CommentController,
+  ReactionPickerController,
+  ShareInviteController,
+  ShareUserSearchController
+}
+
+// Registration function for use with a Stimulus application
+export function registerControllers(application) {
+  application.register("popup-menu", PopupMenuController)
+  application.register("progress-filter", ProgressFilterController)
+  application.register("creatives--import", CreativesImportController)
+  application.register("creatives--select-mode", CreativesSelectModeController)
+  application.register("creatives--drag-drop", CreativesDragDropController)
+  application.register("creatives--expansion", CreativesExpansionController)
+  application.register("creatives--row-editor", CreativesRowEditorController)
+  application.register("creatives--tree", CreativesTreeController)
+  application.register("creatives--set-plan-modal", CreativesSetPlanModalController)
+  application.register("comments--list", CommentsListController)
+  application.register("comments--form", CommentsFormController)
+  application.register("comments--presence", CommentsPresenceController)
+  application.register("comments--mention-menu", CommentsMentionMenuController)
+  application.register("comments--topics", CommentsTopicsController)
+  application.register("comments--popup", CommentsPopupController)
+  application.register("click-target", ClickTargetController)
+  application.register("tabs", TabsController)
+  application.register("link-creative", LinkCreativeController)
+  application.register("common-popup", CommonPopupController)
+  application.register("comment", CommentController)
+  application.register("reaction-picker", ReactionPickerController)
+  application.register("share-invite", ShareInviteController)
+  application.register("share-user-search", ShareUserSearchController)
+}

data/app/javascript/controllers/link_creative_controller.js

@@ -0,0 +1,91 @@
+import CommonPopupController from './common_popup_controller'
+import creativesApi from '../lib/api/creatives'
+
+export default class extends CommonPopupController {
+    static targets = ['input', 'list', 'close']
+
+    connect() {
+        super.connect()
+        this.inputTarget.addEventListener('input', this.search.bind(this))
+        this.inputTarget.addEventListener('keydown', this.handleInputKeydown.bind(this))
+        this.closeTarget.addEventListener('click', () => this.close())
+
+        // Bind public methods
+        this.open = this.open.bind(this)
+    }
+
+    open(anchorRect, onSelectCallback, onCloseCallback) {
+        this.onSelectCallback = onSelectCallback
+        this.onCloseCallback = onCloseCallback
+        this.setItems([])
+        this.inputTarget.value = ''
+        super.open(anchorRect)
+
+        requestAnimationFrame(() => {
+            this.inputTarget.focus()
+        })
+    }
+
+    close() {
+        // super.close() calls popup.hide(), which triggers dispatchClose, 
+        // where we now handle the callback. So we just need to call super.close().
+        super.close()
+    }
+
+    handleInputKeydown(event) {
+        // Delegate to CommonPopup for navigation
+        if (this.handleKey(event)) return
+
+        // Special handling for this specific popup
+        if (event.key === 'Escape') {
+            this.close()
+        }
+    }
+
+    search() {
+        const query = this.inputTarget.value.trim()
+        if (!query) {
+            this.setItems([])
+            return
+        }
+
+        creativesApi.search(query, { simple: true })
+            .then((results) => {
+                const items = Array.isArray(results)
+                    ? results.map((result) => ({ id: result.id, label: result.description }))
+                    : []
+                this.setItems(items)
+            })
+            .catch(() => this.setItems([]))
+    }
+
+    // Override select to invoke callback
+    select(item) {
+        if (this.onSelectCallback) {
+            this.onSelectCallback(item)
+        }
+        this.close()
+    }
+
+    renderItem(item) {
+        // Escape HTML to prevent XSS since CommonPopup uses innerHTML
+        const text = item.label || ''
+        return text
+            .replace(/&/g, "&")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#039;")
+    }
+
+    dispatchClose(reason) {
+        if (this.onCloseCallback) {
+            this.onCloseCallback()
+            this.onCloseCallback = null
+        }
+        // Also clear the callback reference to avoid double calling if close() is called manually later
+        this.onSelectCallback = null
+
+        super.dispatchClose(reason)
+    }
+}

data/app/javascript/controllers/popup_menu_controller.js

@@ -0,0 +1,82 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['menu', 'button']
+
+  connect() {
+    this.handleOutsideClick = this.handleOutsideClick.bind(this)
+  }
+
+  disconnect() {
+    this.removeOutsideClickListener()
+  }
+
+  toggle(event) {
+    event.stopPropagation()
+    if (this.isOpen()) {
+      this.hide()
+    } else {
+      this.show()
+    }
+  }
+
+  menuClick(event) {
+    if (event.target.closest('button, a')) {
+      this.hide()
+    }
+  }
+
+  show() {
+    const menu = this.menuTarget
+    menu.style.display = 'block'
+    menu.style.transform = ''
+
+    const transforms = []
+    const viewportPadding = 4
+
+    this.buttonTarget?.setAttribute('aria-expanded', 'true')
+
+    requestAnimationFrame(() => {
+      const rect = menu.getBoundingClientRect()
+      if (rect.right > window.innerWidth) {
+        transforms.push(`translateX(-${rect.right - window.innerWidth + viewportPadding}px)`)
+      } else if (rect.left < 0) {
+        transforms.push(`translateX(${Math.abs(rect.left) + viewportPadding}px)`)
+      }
+
+      if (rect.bottom > window.innerHeight) {
+        transforms.push(`translateY(-${rect.bottom - window.innerHeight + viewportPadding}px)`)
+      } else if (rect.top < 0) {
+        transforms.push(`translateY(${Math.abs(rect.top) + viewportPadding}px)`)
+      }
+
+      menu.style.transform = transforms.join(' ')
+    })
+
+    this.addOutsideClickListener()
+  }
+
+  hide() {
+    this.menuTarget.style.display = 'none'
+    this.buttonTarget?.setAttribute('aria-expanded', 'false')
+    this.removeOutsideClickListener()
+  }
+
+  handleOutsideClick(event) {
+    if (!this.element.contains(event.target)) {
+      this.hide()
+    }
+  }
+
+  addOutsideClickListener() {
+    document.addEventListener('click', this.handleOutsideClick)
+  }
+
+  removeOutsideClickListener() {
+    document.removeEventListener('click', this.handleOutsideClick)
+  }
+
+  isOpen() {
+    return this.menuTarget.style.display === 'block'
+  }
+}

data/app/javascript/controllers/progress_filter_controller.js

@@ -0,0 +1,35 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['button']
+
+  apply(event) {
+    event.preventDefault()
+    const filter = event.params.filter ?? event.currentTarget.dataset.filter
+    if (!filter) return
+
+    const url = new URL(window.location.href)
+
+    if (filter === 'comment') {
+      if (url.searchParams.get('comment') === 'true') {
+        url.searchParams.delete('comment')
+      } else {
+        url.searchParams.set('comment', 'true')
+      }
+    } else {
+      url.searchParams.delete('min_progress')
+      url.searchParams.delete('max_progress')
+
+      if (filter === 'complete') {
+        url.searchParams.set('min_progress', '1')
+        url.searchParams.set('max_progress', '1')
+      } else if (filter === 'incomplete') {
+        url.searchParams.set('min_progress', '0')
+        url.searchParams.set('max_progress', '0.99')
+      }
+    }
+
+    const query = url.searchParams.toString()
+    window.location.href = query ? `${url.pathname}?${query}` : url.pathname
+  }
+}