collavre 0.1.0

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

@@ -0,0 +1,31 @@
+import csrfFetch from './csrf_fetch';
+
+export function sendNewOrder({ draggedId, draggedIds, targetId, direction }) {
+  const payload = { target_id: targetId, direction };
+  if (Array.isArray(draggedIds) && draggedIds.length > 0) {
+    payload.dragged_ids = draggedIds;
+  } else {
+    payload.dragged_id = draggedId;
+  }
+
+  return csrfFetch('/creatives/reorder', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(payload),
+  });
+}
+
+export function sendLinkedCreative({ draggedId, targetId, direction }) {
+  return csrfFetch('/creatives/link_drop', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ dragged_id: draggedId, target_id: targetId, direction }),
+  }).then((response) => {
+    if (!response.ok) throw new Error('Failed to create linked creative');
+    return response.json();
+  });
+}

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

@@ -0,0 +1,423 @@
+import csrfFetch from './csrf_fetch'
+
+const STORAGE_KEY = 'api_queue'
+const MAX_RETRIES = 3
+
+/**
+ * API Queue Manager
+ * Manages asynchronous API requests with localStorage persistence,
+ * sequential processing, retry logic, and deduplication.
+ */
+class ApiQueueManager {
+    constructor() {
+        this.queue = []
+        this.failedItems = []
+        this.processing = false
+        this.storageKey = 'api_queue_guest' // Default fallback
+        this.setupNetworkListeners()
+    }
+
+    /**
+     * Initialize the queue for a specific user
+     * @param {string|number} userId - Current user ID
+     */
+    initialize(userId) {
+        this.userId = userId
+        this.storageKey = userId ? `api_queue_${userId}` : 'api_queue_guest'
+        this.loadFromLocalStorage()
+        this.loadFailedFromLocalStorage()
+    }
+
+    /**
+     * Load pending requests from localStorage
+     */
+    loadFromLocalStorage() {
+        try {
+            const stored = localStorage.getItem(this.storageKey)
+            if (stored) {
+                this.queue = JSON.parse(stored)
+                // Note: We don't auto-start processing here anymore.
+                // The consumer (creative_row_editor.js) must call start() explicitly
+                // after registering event listeners to avoid missing events.
+            } else {
+                this.queue = []
+            }
+        } catch (error) {
+            console.error('Failed to load API queue from localStorage:', error)
+            this.queue = []
+        }
+    }
+
+    /**
+     * Load failed requests from localStorage so we don't lose them after reload
+     */
+    loadFailedFromLocalStorage() {
+        try {
+            const stored = localStorage.getItem(`${this.storageKey}_failed`)
+            if (stored) {
+                this.failedItems = JSON.parse(stored)
+            } else {
+                this.failedItems = []
+            }
+        } catch (error) {
+            console.error('Failed to load failed API queue from localStorage:', error)
+            this.failedItems = []
+        }
+    }
+
+    /**
+     * Start processing the queue
+     * Should be called after event listeners are registered
+     */
+    start() {
+        if (this.queue.length > 0) {
+            this.processQueue()
+        }
+    }
+
+    /**
+     * Save queue to localStorage
+     * Items with onSuccess callbacks are excluded because functions cannot be serialized
+     * Items with deletedAttachmentIds are included because they're serializable data
+     */
+    saveToLocalStorage() {
+        try {
+            // Filter out onSuccess callbacks (non-serializable)
+            // but keep the items themselves
+            const serializableQueue = this.queue.map(item => {
+                // eslint-disable-next-line no-unused-vars
+                const { onSuccess, ...serializableItem } = item
+                return serializableItem
+            })
+            localStorage.setItem(this.storageKey, JSON.stringify(serializableQueue))
+        } catch (error) {
+            console.error('Failed to save API queue to localStorage:', error)
+        }
+    }
+
+    /**
+     * Persist failed items separately so they can be surfaced to the user later
+     */
+    saveFailedToLocalStorage() {
+        try {
+            localStorage.setItem(`${this.storageKey}_failed`, JSON.stringify(this.failedItems))
+        } catch (error) {
+            console.error('Failed to save failed API queue to localStorage:', error)
+        }
+    }
+
+    /**
+     * Setup network status listeners
+     */
+    setupNetworkListeners() {
+        window.addEventListener('online', () => {
+            console.log('Network online - processing queue')
+            this.processQueue()
+        })
+
+        window.addEventListener('offline', () => {
+            console.log('Network offline - queue will resume when online')
+        })
+    }
+
+    /**
+     * Add a request to the queue
+     * @param {Object} request - Request configuration
+     * @param {string} request.path - API path
+     * @param {string} request.method - HTTP method (GET, POST, PATCH, DELETE)
+     * @param {Object} request.params - URL parameters
+     * @param {Object} request.body - Request body
+     * @param {string} request.dedupeKey - Optional key for deduplication
+     * @param {Function} request.onSuccess - Optional callback to run after successful request
+     * @returns {string} Request ID
+     */
+    enqueue(request) {
+        // Find and merge callbacks and attachment IDs from existing requests with the same dedupeKey
+        let existingCallbacks = []
+        let existingAttachmentIds = []
+        if (request.dedupeKey) {
+            // CRITICAL: Skip the first item if processing is active
+            // The first item might be currently executing in processQueue
+            // Removing it would cause shift() to remove the wrong item
+            const startIndex = this.processing ? 1 : 0
+            const existingItems = this.queue.slice(startIndex).filter(item => item.dedupeKey === request.dedupeKey)
+
+            existingItems.forEach(item => {
+                if (typeof item.onSuccess === 'function') {
+                    existingCallbacks.push(item.onSuccess)
+                }
+                if (item.deletedAttachmentIds && item.deletedAttachmentIds.length > 0) {
+                    existingAttachmentIds.push(...item.deletedAttachmentIds)
+                }
+            })
+
+            // Remove existing requests with the same dedupeKey
+            // CRITICAL: Keep the first item if processing is active
+            if (this.processing) {
+                const firstItem = this.queue[0]
+                this.queue = [firstItem, ...this.queue.slice(1).filter(item => item.dedupeKey !== request.dedupeKey)]
+            } else {
+                this.queue = this.queue.filter(item => item.dedupeKey !== request.dedupeKey)
+            }
+        }
+
+        // Merge attachment IDs
+        let mergedAttachmentIds = null
+        if (request.deletedAttachmentIds && request.deletedAttachmentIds.length > 0) {
+            existingAttachmentIds.push(...request.deletedAttachmentIds)
+        }
+        if (existingAttachmentIds.length > 0) {
+            // Remove duplicates
+            mergedAttachmentIds = [...new Set(existingAttachmentIds)]
+        }
+
+        // Merge new callback with existing callbacks
+        let mergedCallback = null
+        if (existingCallbacks.length > 0 || request.onSuccess) {
+            mergedCallback = () => {
+                // Run all existing callbacks first
+                existingCallbacks.forEach(cb => {
+                    try {
+                        cb()
+                    } catch (error) {
+                        console.error('Merged callback failed:', error)
+                    }
+                })
+                // Then run the new callback
+                if (typeof request.onSuccess === 'function') {
+                    try {
+                        request.onSuccess()
+                    } catch (error) {
+                        console.error('New callback failed:', error)
+                    }
+                }
+            }
+        }
+
+        const queueItem = {
+            id: `${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+            path: request.path,
+            method: request.method || 'GET',
+            params: request.params || null,
+            body: request.body || null,
+            dedupeKey: request.dedupeKey || null,
+            deletedAttachmentIds: mergedAttachmentIds,
+            onSuccess: mergedCallback,
+            timestamp: Date.now(),
+            retries: 0
+        }
+
+        this.queue.push(queueItem)
+        this.saveToLocalStorage()
+
+        // Start processing if not already processing
+        this.processQueue()
+
+        return queueItem.id
+    }
+
+    /**
+     * Process all queued requests sequentially
+     */
+    async processQueue() {
+        if (this.processing || this.queue.length === 0) {
+            return
+        }
+
+        this.processing = true
+
+        while (this.queue.length > 0) {
+            const item = this.queue[0]
+
+            try {
+                await this.executeRequest(item)
+                // Success - handle cleanup actions
+
+                // Dispatch event for attachment cleanup if needed
+                if (item.deletedAttachmentIds && item.deletedAttachmentIds.length > 0) {
+                    window.dispatchEvent(new CustomEvent('api-queue-attachments-deleted', {
+                        detail: { attachmentIds: item.deletedAttachmentIds }
+                    }))
+                }
+
+                // Call onSuccess callback if provided (for non-serializable actions)
+                if (typeof item.onSuccess === 'function') {
+                    try {
+                        item.onSuccess()
+                    } catch (callbackError) {
+                        console.error('onSuccess callback failed:', callbackError)
+                    }
+                }
+
+                // Remove from queue
+                this.queue.shift()
+                this.saveToLocalStorage()
+            } catch (error) {
+                console.error('API request failed:', error, item)
+
+                // Retry logic
+                if (item.retries < MAX_RETRIES) {
+                    item.retries++
+                    // Move to end of queue for retry
+                    this.queue.shift()
+                    this.queue.push(item)
+                    this.saveToLocalStorage()
+                } else {
+                    // Max retries exceeded - move to failedItems for visibility
+                    console.error('Max retries exceeded, moving request to failed items:', item)
+                    const failedItem = { ...item, failedAt: Date.now(), lastError: error?.message }
+                    this.failedItems.push(failedItem)
+                    this.saveFailedToLocalStorage()
+                    this.queue.shift()
+                    this.saveToLocalStorage()
+                    this.handleFailedRequest(failedItem, error)
+                }
+
+                // If network error, stop processing and wait for online event
+                if (!navigator.onLine) {
+                    console.log('Network offline - pausing queue processing')
+                    break
+                }
+            }
+        }
+
+        this.processing = false
+    }
+
+    /**
+     * Execute a single API request
+     * @param {Object} item - Queue item
+     * @returns {Promise<Response>}
+     */
+    async executeRequest(item) {
+        let url = item.path
+
+        // Add query parameters if present
+        if (item.params) {
+            const params = new URLSearchParams()
+            Object.keys(item.params).forEach(key => {
+                params.append(key, item.params[key])
+            })
+            const queryString = params.toString()
+            if (queryString) {
+                url = `${url}?${queryString}`
+            }
+        }
+
+        const options = {
+            method: item.method,
+            headers: {
+                'Accept': 'application/json'
+            }
+        }
+
+        // Add body for POST/PATCH/PUT requests
+        if (item.body && ['POST', 'PATCH', 'PUT'].includes(item.method)) {
+            // If body is FormData, use it (or clone it if needed, but direct use is usually fine)
+            // We can iterate entries to be safe and consistent with previous fix intent
+            if (item.body instanceof FormData) {
+                const formData = new FormData()
+                // FormData.entries() iterator
+                for (const [key, value] of item.body.entries()) {
+                    formData.append(key, value)
+                }
+                options.body = formData
+            }
+            // If body is a plain object, convert to FormData
+            else if (item.body && typeof item.body === 'object') {
+                const formData = new FormData()
+                Object.keys(item.body).forEach(key => {
+                    const value = item.body[key]
+                    if (value !== null && value !== undefined) {
+                        formData.append(key, value)
+                    }
+                })
+                options.body = formData
+            } else {
+                options.body = item.body
+            }
+        }
+
+        const response = await csrfFetch(url, options)
+
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+        }
+
+        return response
+    }
+
+    /**
+     * Handle permanently failed requests
+     * @param {Object} item - Failed queue item
+     * @param {Error} error - Error object
+     */
+    handleFailedRequest(item, error) {
+        // Log to console or send to error tracking service
+        console.error('Request permanently failed:', {
+            item,
+            error: error.message,
+            timestamp: new Date().toISOString()
+        })
+
+        // Could dispatch a custom event for UI notification
+        window.dispatchEvent(new CustomEvent('api-queue-request-failed', {
+            detail: { item, error }
+        }))
+    }
+
+    /**
+     * Clear all queued requests
+     */
+    clear() {
+        this.queue = []
+        this.failedItems = []
+        this.saveToLocalStorage()
+        this.saveFailedToLocalStorage()
+    }
+
+    /**
+     * Remove items with a specific dedupe key
+     * @param {string} dedupeKey - Key to remove
+     */
+    removeByDedupeKey(dedupeKey) {
+        if (!dedupeKey) return
+
+        // Filter out items with the matching key
+        // CRITICAL: If processing is active, we must NOT remove the first item
+        // as it is currently being executed. Removing it would cause state inconsistency.
+        if (this.processing && this.queue.length > 0) {
+            const firstItem = this.queue[0]
+            // If the currently processing item matches, we can't stop it,
+            // but we can remove subsequent queued items.
+            const rest = this.queue.slice(1).filter(item => item.dedupeKey !== dedupeKey)
+            this.queue = [firstItem, ...rest]
+        } else {
+            this.queue = this.queue.filter(item => item.dedupeKey !== dedupeKey)
+        }
+        this.saveToLocalStorage()
+    }
+
+    /**
+     * Get current queue status
+     * @returns {Object} Queue status
+     */
+    getStatus() {
+        return {
+            queueLength: this.queue.length,
+            processing: this.processing,
+            failedLength: this.failedItems.length,
+            items: this.queue.map(item => ({
+                id: item.id,
+                path: item.path,
+                method: item.method,
+                retries: item.retries,
+                timestamp: item.timestamp
+            }))
+        }
+    }
+}
+
+// Export singleton instance
+export const apiQueue = new ApiQueueManager()
+export default apiQueue

data/app/javascript/lib/apply_lexical_styles.js

@@ -0,0 +1,15 @@
+import {syncLexicalStyleAttributes} from "./lexical/style_attributes"
+
+export function applyLexicalStyles(root = document) {
+  syncLexicalStyleAttributes(root)
+}
+
+const handleLoad = (event) => {
+  const target = event?.target instanceof Element ? event.target : document
+  applyLexicalStyles(target)
+}
+
+document.addEventListener("turbo:load", handleLoad)
+document.addEventListener("turbo:frame-load", handleLoad)
+
+applyLexicalStyles(document)

data/app/javascript/lib/common_popup.js

@@ -0,0 +1,195 @@
+export default class CommonPopup {
+  constructor(element, { listElement, onSelect, renderItem, onClose, closeOnOutsideClick = true } = {}) {
+    this.element = element
+    this.listElement = listElement || element?.querySelector('[data-popup-list]') || element?.querySelector('ul')
+    this.onSelect = onSelect || (() => { })
+    this.renderItem = renderItem || ((item) => item?.label || '')
+    this.onClose = onClose
+    this.closeOnOutsideClick = closeOnOutsideClick
+    this.items = []
+    this.activeIndex = -1
+
+    this.handleOutsideClick = this.handleOutsideClick.bind(this)
+  }
+
+  showAt(anchorRect) {
+    if (!this.element) return
+
+    this.element.style.display = 'block'
+    this.element.style.visibility = 'hidden'
+
+    requestAnimationFrame(() => {
+      this.updatePosition(anchorRect)
+      this.element.style.visibility = 'visible'
+    })
+
+    if (this.closeOnOutsideClick) {
+      document.addEventListener('mousedown', this.handleOutsideClick)
+      document.addEventListener('touchstart', this.handleOutsideClick)
+    }
+  }
+
+  updatePosition(anchorRect) {
+    if (!this.element) return
+
+    const scrollX = window.scrollX || window.pageXOffset || 0
+    const scrollY = window.scrollY || window.pageYOffset || 0
+    const offsetParent = this.element.offsetParent
+    const parentRect = offsetParent?.getBoundingClientRect?.() || { left: 0, top: 0 }
+    const parentScrollX = offsetParent?.scrollLeft || 0
+    const parentScrollY = offsetParent?.scrollTop || 0
+    const boundsPadding = 8
+    const rect = anchorRect || this.element.getBoundingClientRect()
+
+    let viewportLeft = (rect?.left || 0)
+    let viewportTop = (rect?.bottom || 0) + 4
+
+    const { offsetWidth: width, offsetHeight: height } = this.element
+    const maxLeft = window.innerWidth - width - boundsPadding
+    const maxTop = window.innerHeight - height - boundsPadding
+
+    viewportLeft = Math.max(boundsPadding, Math.min(viewportLeft, maxLeft))
+    viewportTop = Math.max(boundsPadding, Math.min(viewportTop, maxTop))
+
+    const left = viewportLeft - parentRect.left + parentScrollX
+    const top = viewportTop - parentRect.top + parentScrollY
+
+    this.element.style.left = `${left}px`
+    this.element.style.top = `${top}px`
+  }
+
+  setItems(items = []) {
+    this.items = items
+    if (!this.listElement) return
+
+    this.listElement.innerHTML = ''
+    items.forEach((item, index) => {
+      const li = document.createElement('li')
+      li.className = 'common-popup-item'
+      li.dataset.index = String(index)
+      li.innerHTML = this.renderItem(item, index)
+      li.addEventListener('mouseenter', () => this.setActiveIndex(index))
+      li.addEventListener('mousedown', (event) => event.preventDefault())
+      li.addEventListener('click', () => this.handleItemSelect(index))
+
+      // Handle touch events for mobile stability (prevent keyboard dismissal/double-tap issues)
+      let touchStartY = null
+      li.addEventListener('touchstart', (e) => {
+        touchStartY = e.touches[0].clientY
+      }, { passive: false })
+
+      li.addEventListener('touchend', (e) => {
+        if (touchStartY === null) return
+        const diffY = Math.abs(e.changedTouches[0].clientY - touchStartY)
+        if (diffY < 10) { // Threshold for tap vs scroll
+          e.preventDefault()
+          this.handleItemSelect(index)
+        }
+        touchStartY = null
+      })
+
+      this.listElement.appendChild(li)
+    })
+
+    this.activeIndex = items.length > 0 ? 0 : -1
+    this.updateActiveItem()
+  }
+
+  handleItemSelect(index) {
+    if (index < 0 || index >= this.items.length) return
+    this.activeIndex = index
+    this.updateActiveItem()
+    const item = this.items[index]
+    if (item) {
+      this.onSelect(item)
+    }
+  }
+
+  setActiveIndex(index) {
+    if (this.items.length === 0) {
+      this.activeIndex = -1
+      this.updateActiveItem()
+      return
+    }
+
+    if (index < 0) {
+      this.activeIndex = this.items.length - 1
+    } else {
+      this.activeIndex = index % this.items.length
+    }
+    this.updateActiveItem()
+  }
+
+  updateActiveItem() {
+    if (!this.listElement) return
+    const items = Array.from(this.listElement.children)
+    items.forEach((item, index) => {
+      item.classList.toggle('active', index === this.activeIndex)
+    })
+
+    const activeItem = items[this.activeIndex]
+    if (activeItem && activeItem.scrollIntoView) {
+      activeItem.scrollIntoView({ block: 'nearest' })
+    }
+  }
+
+  handleKey(event) {
+    if (!this.isOpen() || this.items.length === 0) return false
+
+    const key = event.key
+    const isCtrl = event.ctrlKey || event.metaKey
+    const lowered = key?.toLowerCase?.() || key
+
+    if (key === 'Tab' || key === 'Enter') {
+      event.preventDefault()
+      this.handleItemSelect(this.activeIndex)
+      return true
+    }
+
+    if (key === 'ArrowDown' || (isCtrl && lowered === 'n')) {
+      event.preventDefault()
+      this.setActiveIndex(this.activeIndex + 1)
+      return true
+    }
+
+    if (key === 'ArrowUp' || (isCtrl && lowered === 'p')) {
+      event.preventDefault()
+      this.setActiveIndex(this.activeIndex - 1)
+      return true
+    }
+
+    if (key === 'Escape') {
+      this.hide('escape')
+      return true
+    }
+
+    return false
+  }
+
+  hide(reason = 'manual') {
+    if (!this.element || !this.isOpen()) return
+    this.element.style.display = 'none'
+    this.element.style.visibility = ''
+    this.items = []
+    this.activeIndex = -1
+    this.updateActiveItem()
+
+    document.removeEventListener('mousedown', this.handleOutsideClick)
+    document.removeEventListener('touchstart', this.handleOutsideClick)
+
+    if (typeof this.onClose === 'function') {
+      this.onClose(reason)
+    }
+  }
+
+  handleOutsideClick(event) {
+    if (!this.element) return
+    if (!this.element.contains(event.target)) {
+      this.hide('outside')
+    }
+  }
+
+  isOpen() {
+    return this.element && this.element.style.display === 'block'
+  }
+}