collavre 0.1.1 → 0.2.0

data/app/javascript/controllers/comments/topics_controller.js

@@ -86,12 +86,25 @@ export default class extends Controller {
     }
 
     renderTopics(topics, canManage = false) {
-        let html = `<span class="topic-tag ${this.currentTopicId ? '' : 'active'}" data-action="click->comments--topics#select" data-id="">#Main</span>`
+        const dragActions = canManage 
+            ? 'dragstart->comments--topics#handleTopicDragStart dragend->comments--topics#handleTopicDragEnd'
+            : ''
+        const dropActions = 'dragover->comments--topics#handleDragOver dragleave->comments--topics#handleDragLeave drop->comments--topics#handleDrop'
+        const topicDropActions = canManage
+            ? 'dragover->comments--topics#handleTopicReorderDragOver dragleave->comments--topics#handleTopicReorderDragLeave drop->comments--topics#handleTopicReorderDrop'
+            : ''
+
+        let html = `<span class="topic-tag topic-drop-target ${this.currentTopicId ? '' : 'active'}" 
+                          data-action="click->comments--topics#select ${dropActions}" 
+                          data-id="">#Main</span>`
 
         topics.forEach(topic => {
             // Ensure comparison handles string/number difference
             const isActive = String(this.currentTopicId) === String(topic.id) ? 'active' : ''
-            html += `<span class="topic-tag ${isActive}" data-action="click->comments--topics#select" data-id="${topic.id}">
+            const draggable = canManage ? 'draggable="true"' : ''
+            html += `<span class="topic-tag topic-drop-target ${isActive}" ${draggable}
+                          data-action="click->comments--topics#select ${dropActions} ${dragActions} ${topicDropActions}" 
+                          data-id="${topic.id}">
                         #${topic.name}`
 
             if (canManage) {
@@ -111,6 +124,163 @@ export default class extends Controller {
         this.listTarget.innerHTML = html
     }
 
+    handleDragOver(event) {
+        // Only accept comment drops
+        if (!event.dataTransfer.types.includes('application/x-comment-ids')) return
+
+        event.preventDefault()
+        event.dataTransfer.dropEffect = 'move'
+        event.currentTarget.classList.add('drag-over')
+    }
+
+    handleDragLeave(event) {
+        event.currentTarget.classList.remove('drag-over')
+    }
+
+    async handleDrop(event) {
+        event.preventDefault()
+        event.currentTarget.classList.remove('drag-over')
+
+        const commentIdsJson = event.dataTransfer.getData('application/x-comment-ids')
+        if (!commentIdsJson) return
+
+        const commentIds = JSON.parse(commentIdsJson)
+        if (!commentIds || commentIds.length === 0) return
+
+        const targetTopicId = event.currentTarget.dataset.id // Empty string for Main
+
+        // Dispatch event for list_controller to handle the move
+        this.dispatch('move-to-topic', { 
+            detail: { 
+                commentIds, 
+                targetTopicId 
+            } 
+        })
+    }
+
+    // Topic reorder drag & drop handlers
+    handleTopicDragStart(event) {
+        const topicEl = event.currentTarget
+        const topicId = topicEl.dataset.id
+        if (!topicId) {
+            event.preventDefault()
+            return
+        }
+
+        this.draggingTopicId = topicId
+        event.dataTransfer.setData('application/x-topic-id', topicId)
+        event.dataTransfer.effectAllowed = 'move'
+        
+        requestAnimationFrame(() => {
+            topicEl.classList.add('topic-dragging')
+        })
+    }
+
+    handleTopicDragEnd(event) {
+        this.draggingTopicId = null
+        event.currentTarget.classList.remove('topic-dragging')
+        this.listTarget.querySelectorAll('.topic-tag').forEach(el => {
+            el.classList.remove('topic-drag-over-left', 'topic-drag-over-right')
+        })
+    }
+
+    handleTopicReorderDragOver(event) {
+        // Only accept topic reorder drops
+        if (!event.dataTransfer.types.includes('application/x-topic-id')) return
+        if (!this.draggingTopicId) return
+
+        const targetEl = event.currentTarget
+        const targetId = targetEl.dataset.id
+
+        // Don't allow drop on self or Main
+        if (!targetId || targetId === this.draggingTopicId) return
+
+        event.preventDefault()
+        event.dataTransfer.dropEffect = 'move'
+
+        // Determine drop position (left or right) based on mouse position
+        const rect = targetEl.getBoundingClientRect()
+        const midpoint = rect.left + rect.width / 2
+        const isLeft = event.clientX < midpoint
+
+        targetEl.classList.toggle('topic-drag-over-left', isLeft)
+        targetEl.classList.toggle('topic-drag-over-right', !isLeft)
+    }
+
+    handleTopicReorderDragLeave(event) {
+        event.currentTarget.classList.remove('topic-drag-over-left', 'topic-drag-over-right')
+    }
+
+    async handleTopicReorderDrop(event) {
+        event.preventDefault()
+        
+        const targetEl = event.currentTarget
+        targetEl.classList.remove('topic-drag-over-left', 'topic-drag-over-right')
+
+        const draggedTopicId = event.dataTransfer.getData('application/x-topic-id')
+        const targetTopicId = targetEl.dataset.id
+
+        if (!draggedTopicId || !targetTopicId || draggedTopicId === targetTopicId) return
+
+        // Determine drop position
+        const rect = targetEl.getBoundingClientRect()
+        const midpoint = rect.left + rect.width / 2
+        const insertBefore = event.clientX < midpoint
+
+        // Reorder topics array
+        const topics = [...this.topics]
+        const draggedIndex = topics.findIndex(t => String(t.id) === String(draggedTopicId))
+        const targetIndex = topics.findIndex(t => String(t.id) === String(targetTopicId))
+
+        if (draggedIndex === -1 || targetIndex === -1) return
+
+        // Remove dragged topic
+        const [draggedTopic] = topics.splice(draggedIndex, 1)
+
+        // Calculate new position
+        let newIndex = targetIndex
+        if (draggedIndex < targetIndex) {
+            newIndex = insertBefore ? targetIndex - 1 : targetIndex
+        } else {
+            newIndex = insertBefore ? targetIndex : targetIndex + 1
+        }
+
+        // Insert at new position
+        topics.splice(newIndex, 0, draggedTopic)
+
+        // Update local state and UI immediately
+        this.topics = topics
+        this.renderTopics(topics, this.canManageTopics)
+        this.restoreSelection()
+
+        // Send to server
+        await this.saveTopicOrder(topics.map(t => t.id))
+    }
+
+    async saveTopicOrder(topicIds) {
+        if (!this.creativeId) return
+
+        try {
+            const response = await fetch(`/creatives/${this.creativeId}/topics/reorder`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
+                },
+                body: JSON.stringify({ topic_ids: topicIds })
+            })
+
+            if (!response.ok) {
+                console.error('Failed to save topic order')
+                // Reload to restore server state
+                this.loadTopics()
+            }
+        } catch (e) {
+            console.error('Error saving topic order', e)
+            this.loadTopics()
+        }
+    }
+
     async deleteTopic(event) {
         event.stopPropagation()
         const confirmText = this.listTarget.dataset.confirmDeleteText || "This will delete all messages in this topic. Are you sure?"
@@ -182,8 +352,17 @@ export default class extends Controller {
     select(event) {
         // Ignore if clicking on delete button (though stopPropagation should handle it)
         if (event.target.closest('.delete-topic-btn')) return
+        // Ignore if clicking on edit input
+        if (event.target.closest('.topic-edit-input')) return
 
         const id = event.currentTarget.dataset.id
+        
+        // If clicking on already active topic (not Main), show edit mode
+        if (id && String(this.currentTopicId) === String(id) && this.canManageTopics) {
+            this.showEditInput(event.currentTarget, id)
+            return
+        }
+        
         this.selectTopic(id)
     }
 
@@ -196,15 +375,105 @@ export default class extends Controller {
         this.dispatch("change", { detail: { topicId: id } })
     }
 
+    showEditInput(topicEl, topicId) {
+        const topic = this.topics.find(t => String(t.id) === String(topicId))
+        if (!topic) return
+
+        const currentName = topic.name
+        
+        // Store original HTML for restore
+        topicEl.dataset.originalHtml = topicEl.innerHTML
+        
+        // Replace content with input
+        topicEl.innerHTML = `<input type="text" class="topic-edit-input" value="${currentName}"
+                              data-action="keydown->comments--topics#handleEditKey blur->comments--topics#cancelEdit"
+                              data-topic-id="${topicId}">`
+        
+        const input = topicEl.querySelector('input')
+        requestAnimationFrame(() => {
+            input.focus()
+            input.select()
+        })
+    }
+
+    handleEditKey(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault()
+            const name = event.target.value.trim()
+            const topicId = event.target.dataset.topicId
+            if (name) {
+                this.updateTopic(topicId, name)
+            } else {
+                this.cancelEdit(event)
+            }
+        } else if (event.key === 'Escape') {
+            event.preventDefault()
+            this.cancelEdit(event)
+        }
+    }
+
+    cancelEdit(event) {
+        // Prevent blur from firing multiple times
+        if (this.editCancelling) return
+        this.editCancelling = true
+
+        const topicEl = event.target.closest('.topic-tag')
+        if (topicEl && topicEl.dataset.originalHtml) {
+            topicEl.innerHTML = topicEl.dataset.originalHtml
+            delete topicEl.dataset.originalHtml
+        }
+
+        setTimeout(() => { this.editCancelling = false }, 100)
+    }
+
+    async updateTopic(topicId, name) {
+        if (!this.creativeId) return
+
+        try {
+            const response = await fetch(`/creatives/${this.creativeId}/topics/${topicId}`, {
+                method: 'PATCH',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
+                },
+                body: JSON.stringify({ topic: { name } })
+            })
+
+            if (response.ok) {
+                const updatedTopic = await response.json()
+                // Update local topics array
+                const index = this.topics.findIndex(t => String(t.id) === String(topicId))
+                if (index !== -1) {
+                    this.topics[index] = updatedTopic
+                }
+                this.renderTopics(this.topics, this.canManageTopics)
+                this.restoreSelection()
+            } else {
+                alert("Failed to update topic")
+                this.loadTopics() // Reload to restore state
+            }
+        } catch (e) {
+            console.error("Error updating topic", e)
+            this.loadTopics()
+        }
+    }
+
     updateSelectionUI(id) {
         this.currentTopicId = id
         // Update UI
+        let activeEl = null
         this.listTarget.querySelectorAll('.topic-tag').forEach(el => {
-            el.classList.toggle('active', String(el.dataset.id) === String(id))
-            if (String(el.dataset.id) === String(id)) {
+            const isActive = String(el.dataset.id) === String(id)
+            el.classList.toggle('active', isActive)
+            if (isActive) {
                 el.classList.remove('has-new-messages')
+                activeEl = el
             }
         })
+        // Scroll active topic into view
+        if (activeEl) {
+            activeEl.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
+        }
     }
 
     handleNewMessage(event) {
@@ -308,6 +577,16 @@ export default class extends Controller {
             return
         }
 
+        if (action === "updated" && data.topic) {
+            this.updateTopicInList(data.topic)
+            return
+        }
+
+        if (action === "reordered" && data.topic_ids) {
+            this.reorderTopicsFromServer(data.topic_ids)
+            return
+        }
+
         if (!data.topic) return
 
         const topics = this.topics || []
@@ -319,6 +598,37 @@ export default class extends Controller {
         this.restoreSelection()
     }
 
+    reorderTopicsFromServer(topicIds) {
+        if (!topicIds || !Array.isArray(topicIds)) return
+
+        const reorderedTopics = []
+        topicIds.forEach(id => {
+            const topic = this.topics.find(t => String(t.id) === String(id))
+            if (topic) reorderedTopics.push(topic)
+        })
+
+        // Add any topics not in the list (shouldn't happen, but safety)
+        this.topics.forEach(topic => {
+            if (!reorderedTopics.find(t => String(t.id) === String(topic.id))) {
+                reorderedTopics.push(topic)
+            }
+        })
+
+        this.topics = reorderedTopics
+        this.renderTopics(this.topics, this.canManageTopics)
+        this.restoreSelection()
+    }
+
+    updateTopicInList(updatedTopic) {
+        const topics = this.topics || []
+        const index = topics.findIndex(t => String(t.id) === String(updatedTopic.id))
+        if (index === -1) return
+
+        this.topics[index] = updatedTopic
+        this.renderTopics(this.topics, this.canManageTopics)
+        this.restoreSelection()
+    }
+
     removeTopic(topicId) {
         if (!topicId) return
 

data/app/javascript/modules/__tests__/creative_progress.test.js

@@ -0,0 +1,50 @@
+/**
+ * @jest-environment jsdom
+ */
+import { isProgressComplete, progressBaselineValueFrom, progressValueChangedFrom } from '../creative_progress';
+
+describe('creative progress helpers', () => {
+  describe('isProgressComplete', () => {
+    test('returns true for values >= 1', () => {
+      expect(isProgressComplete(1)).toBe(true);
+      expect(isProgressComplete(1.0)).toBe(true);
+      expect(isProgressComplete(1.5)).toBe(true);
+    });
+
+    test('returns false for values < 1', () => {
+      expect(isProgressComplete(0)).toBe(false);
+      expect(isProgressComplete(0.5)).toBe(false);
+      expect(isProgressComplete(0.99)).toBe(false);
+    });
+
+    test('returns false for NaN values', () => {
+      expect(isProgressComplete(NaN)).toBe(false);
+      expect(isProgressComplete('invalid')).toBe(false);
+    });
+  });
+
+  describe('progressBaselineValueFrom', () => {
+    test('returns 1 for complete values', () => {
+      expect(progressBaselineValueFrom(1)).toBe(1);
+      expect(progressBaselineValueFrom(1.5)).toBe(1);
+    });
+
+    test('returns 0 for incomplete values', () => {
+      expect(progressBaselineValueFrom(0)).toBe(0);
+      expect(progressBaselineValueFrom(0.4)).toBe(0);
+      expect(progressBaselineValueFrom(0.99)).toBe(0);
+    });
+  });
+
+  describe('progressValueChangedFrom', () => {
+    test('preserves fractional values unless checkbox toggled', () => {
+      expect(progressValueChangedFrom(0.4, false)).toBe(false);
+      expect(progressValueChangedFrom(0.4, true)).toBe(true);
+    });
+
+    test('detects change from complete to incomplete', () => {
+      expect(progressValueChangedFrom(1, false)).toBe(true);
+      expect(progressValueChangedFrom(1, true)).toBe(false);
+    });
+  });
+});

data/app/javascript/modules/command_menu.js

@@ -0,0 +1,116 @@
+import CommonPopup from '../lib/common_popup'
+import { getCaretClientRect } from '../utils/caret_position'
+
+let commandMenuInitialized = false
+
+if (!commandMenuInitialized) {
+  commandMenuInitialized = true
+
+  document.addEventListener('turbo:load', function () {
+    const textarea = document.querySelector('#new-comment-form textarea')
+    const menu = document.getElementById('command-menu')
+    const popup = document.getElementById('comments-popup')
+    if (!textarea || !menu || !popup) return
+
+    const list = menu.querySelector('[data-popup-list]')
+    const commandCache = new Map()
+
+    const popupMenu = new CommonPopup(menu, {
+      listElement: list,
+      renderItem: (command) => {
+        const aliasLabel = command.aliases?.length
+          ? `<span class="command-aliases">(${command.aliases.join(', ')})</span>`
+          : ''
+        const args = command.args ? `<span class="command-args">${command.args}</span>` : ''
+        const description = command.description
+          ? `<div class="command-description">${command.description}</div>`
+          : ''
+        return `
+          <div class="command-item">
+            <span class="command-label">${command.label}</span>
+            ${aliasLabel}
+            ${args}
+          </div>
+          ${description}
+        `
+      },
+      onSelect: (command) => {
+        insert(command)
+        popupMenu.hide()
+        textarea.focus()
+      }
+    })
+
+    function fetchCommands(creativeId) {
+      if (!creativeId) return Promise.resolve([])
+      if (commandCache.has(creativeId)) return Promise.resolve(commandCache.get(creativeId))
+
+      return fetch(`/creatives/${creativeId}/comments/commands`, { headers: { Accept: 'application/json' } })
+        .then((response) => (response.ok ? response.json() : []))
+        .then((data) => {
+          const list = Array.isArray(data) ? data : []
+          commandCache.set(creativeId, list)
+          return list
+        })
+        .catch(() => [])
+    }
+
+    function insert(command) {
+      const pos = textarea.selectionStart
+      const after = textarea.value.slice(pos)
+      // Since "/" is always at the start, replace from beginning
+      const replaced = `${command.label} `
+      textarea.value = replaced + after
+      textarea.setSelectionRange(replaced.length, replaced.length)
+    }
+
+    function hide() {
+      popupMenu.hide()
+    }
+
+    function show(commands, query) {
+      if (!commands || commands.length === 0) {
+        hide()
+        return
+      }
+
+      const lowered = query.toLowerCase()
+      const filtered = commands.filter((command) => {
+        if (!lowered) return true
+        const name = command.name?.toLowerCase?.() || ''
+        const aliases = (command.aliases || []).map((alias) => alias.toLowerCase())
+        return name.includes(lowered) || aliases.some((alias) => alias.replace('/', '').includes(lowered))
+      })
+
+      if (filtered.length === 0) {
+        hide()
+        return
+      }
+
+      popupMenu.setItems(filtered)
+      const caretRect = getCaretClientRect(textarea) || textarea.getBoundingClientRect()
+      popupMenu.showAt(caretRect)
+    }
+
+    textarea.addEventListener('keydown', function (event) {
+      if (popupMenu.handleKey(event)) return
+    })
+
+    textarea.addEventListener('input', function () {
+      const pos = textarea.selectionStart
+      const before = textarea.value.slice(0, pos)
+      // Only trigger when "/" is at the very beginning of the message
+      const match = before.match(/^\/([^\s/]*)$/)
+      if (!match) {
+        hide()
+        return
+      }
+
+      const creativeId = popup.dataset.creativeId
+      const query = match[1]
+
+      fetchCommands(creativeId)
+        .then((commands) => show(commands, query))
+    })
+  })
+}

data/app/javascript/modules/creative_progress.js

@@ -0,0 +1,14 @@
+export function isProgressComplete(value) {
+  const numeric = Number(value);
+  return !Number.isNaN(numeric) && numeric >= 1;
+}
+
+export function progressBaselineValueFrom(originalProgress) {
+  return isProgressComplete(originalProgress) ? 1 : 0;
+}
+
+export function progressValueChangedFrom(originalProgress, checked) {
+  const baseline = progressBaselineValueFrom(originalProgress);
+  const current = checked ? 1 : 0;
+  return current !== baseline;
+}