collavre 0.1.0

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

@@ -0,0 +1,311 @@
+import { Controller } from '@hotwired/stimulus'
+import { createSubscription } from '../../services/cable'
+
+const TYPING_TIMEOUT = 3000
+
+export default class extends Controller {
+  static targets = ['participants', 'typingIndicator', 'textarea', 'privateCheckbox']
+
+  connect() {
+    this.creativeId = null
+    this.participantsData = null
+    this.currentPresentIds = []
+    this.typingUsers = {}
+    this.typingTimers = {}
+    this.manualTypingMessage = null
+    this.presenceSubscription = null
+    this.typingTimeoutHandle = null
+    this.hasPresenceConnected = false
+
+    this.handleInput = this.handleInput.bind(this)
+    this.handleFocus = this.handleFocus.bind(this)
+    this.handleBlur = this.handleBlur.bind(this)
+
+    this.textareaTarget.addEventListener('input', this.handleInput)
+    this.textareaTarget.addEventListener('focus', this.handleFocus)
+    this.textareaTarget.addEventListener('blur', this.handleBlur)
+    this.privateCheckboxTarget?.addEventListener('change', () => this.stoppedTyping())
+  }
+
+  disconnect() {
+    this.unsubscribe()
+    this.textareaTarget.removeEventListener('input', this.handleInput)
+    this.textareaTarget.removeEventListener('focus', this.handleFocus)
+    this.textareaTarget.removeEventListener('blur', this.handleBlur)
+  }
+
+  get listController() {
+    return this.application.getControllerForElementAndIdentifier(this.element, 'comments--list')
+  }
+
+  onPopupOpened({ creativeId }) {
+    this.creativeId = creativeId
+    this.loadParticipants()
+    this.subscribe()
+    this.renderParticipants([])
+    this.renderTypingIndicator()
+  }
+
+  onPopupClosed() {
+    this.unsubscribe()
+    this.participantsData = null
+    this.currentPresentIds = []
+    this.typingUsers = {}
+    this.clearTypingTimers()
+    this.clearManualTypingMessage()
+    this.renderParticipants([])
+    this.renderTypingIndicator()
+    this.element.style.bottom = ''
+  }
+
+  setManualTypingMessage(message) {
+    this.manualTypingMessage = message || null
+    this.renderTypingIndicator()
+  }
+
+  clearManualTypingMessage() {
+    if (this.manualTypingMessage !== null) {
+      this.manualTypingMessage = null
+      this.renderTypingIndicator()
+    }
+  }
+
+  typing() {
+    if (!this.presenceSubscription || this.privateCheckboxTarget?.checked) return
+    this.presenceSubscription.perform('typing')
+    this.resetTypingTimeout()
+  }
+
+  stoppedTyping() {
+    if (this.presenceSubscription) {
+      this.presenceSubscription.perform('stopped_typing')
+    }
+    if (this.typingTimeoutHandle) {
+      clearTimeout(this.typingTimeoutHandle)
+      this.typingTimeoutHandle = null
+    }
+  }
+
+  loadParticipants() {
+    if (!this.creativeId) return
+    fetch(`/creatives/${this.creativeId}/comments/participants`)
+      .then((response) => response.json())
+      .then((data) => {
+        this.participantsData = data
+        this.renderParticipants(this.currentPresentIds)
+        this.renderTypingIndicator()
+      })
+  }
+
+  subscribe() {
+    if (!this.creativeId) return
+    this.unsubscribe()
+    this.hasPresenceConnected = false
+    this.presenceSubscription = createSubscription(
+      { channel: 'CommentsPresenceChannel', creative_id: this.creativeId },
+      {
+        connected: () => {
+          if (this.hasPresenceConnected) {
+            this.listController?.loadInitialComments()
+          }
+          this.hasPresenceConnected = true
+        },
+        received: (data) => this.handlePresenceMessage(data),
+      },
+    )
+  }
+
+  unsubscribe() {
+    if (this.presenceSubscription) {
+      this.presenceSubscription.unsubscribe()
+      this.presenceSubscription = null
+    }
+    this.stoppedTyping()
+  }
+
+  handlePresenceMessage(data) {
+    if (data.ids) {
+      this.currentPresentIds = data.ids.map((id) => parseInt(id, 10))
+      this.renderParticipants(this.currentPresentIds)
+      this.updateReadReceiptPresence(this.currentPresentIds)
+    }
+    if (data.typing) {
+      const { id, name } = data.typing
+      this.typingUsers[id] = name
+      this.renderTypingIndicator()
+      clearTimeout(this.typingTimers[id])
+      this.typingTimers[id] = setTimeout(() => {
+        delete this.typingUsers[id]
+        delete this.typingTimers[id]
+        this.renderTypingIndicator()
+      }, TYPING_TIMEOUT)
+    }
+    if (data.stop_typing) {
+      const { id } = data.stop_typing
+      delete this.typingUsers[id]
+      if (this.typingTimers[id]) {
+        clearTimeout(this.typingTimers[id])
+        delete this.typingTimers[id]
+      }
+      this.renderTypingIndicator()
+    }
+  }
+
+  renderParticipants(presentIds) {
+    if (!this.hasParticipantsTarget || !this.participantsData) {
+      if (this.hasParticipantsTarget) this.participantsTarget.innerHTML = ''
+      return
+    }
+    this.participantsTarget.innerHTML = ''
+    this.participantsData.forEach((user) => {
+      const wrapper = document.createElement('div')
+      wrapper.className = 'avatar-wrapper'
+      wrapper.style.width = '20px'
+      wrapper.style.height = '20px'
+
+      const img = document.createElement('img')
+      img.src = user.avatar_url
+      img.alt = ''
+      img.width = 20
+      img.height = 20
+      img.className = 'avatar comment-presence-avatar'
+      if (presentIds.indexOf(user.id) === -1) {
+        img.classList.add('inactive')
+      }
+      img.title = user.name
+      img.style.borderRadius = '50%'
+      if (user.email) img.dataset.email = user.email
+      img.dataset.userId = user.id
+      img.dataset.userName = user.name
+      wrapper.appendChild(img)
+
+      if (user.default_avatar) {
+        const span = document.createElement('span')
+        span.className = 'avatar-initial'
+        span.textContent = user.initial
+        span.style.fontSize = `${Math.round(20 / 2)}px`
+        wrapper.appendChild(span)
+      }
+
+      this.participantsTarget.appendChild(wrapper)
+    })
+
+    this.updateReadReceiptPresence(presentIds)
+  }
+
+  renderTypingIndicator() {
+    if (!this.hasTypingIndicatorTarget) return
+    this.typingIndicatorTarget.innerHTML = ''
+
+    if (this.manualTypingMessage) {
+      const message = document.createElement('span')
+      message.textContent = this.manualTypingMessage
+      this.typingIndicatorTarget.style.visibility = 'visible'
+      this.typingIndicatorTarget.appendChild(message)
+      return
+    }
+
+    const ids = Object.keys(this.typingUsers)
+    if (ids.length === 0) {
+      this.typingIndicatorTarget.style.visibility = 'hidden'
+      return
+    }
+
+    this.typingIndicatorTarget.style.visibility = 'visible'
+    if (this.participantsData) {
+      ids.forEach((id) => {
+        const user = this.participantsData.find((participant) => participant.id === parseInt(id, 10))
+        if (!user) return
+        const wrapper = document.createElement('span')
+        wrapper.className = 'avatar-wrapper'
+        const img = document.createElement('img')
+        img.src = user.avatar_url
+        img.alt = ''
+        img.width = 20
+        img.height = 20
+        img.className = 'avatar comment-presence-avatar'
+        img.style.borderRadius = '50%'
+        wrapper.appendChild(img)
+        if (user.default_avatar) {
+          const span = document.createElement('span')
+          span.className = 'avatar-initial'
+          span.textContent = user.initial
+          span.style.fontSize = `${Math.round(20 / 2)}px`
+          wrapper.appendChild(span)
+        }
+        this.typingIndicatorTarget.appendChild(wrapper)
+      })
+    }
+    const names = ids.map((id) => this.typingUsers[id])
+    const text = document.createElement('span')
+    text.textContent = `${names.join(', ')} ...`
+    this.typingIndicatorTarget.appendChild(text)
+  }
+
+  clearTypingTimers() {
+    Object.values(this.typingTimers).forEach((timer) => clearTimeout(timer))
+    this.typingTimers = {}
+  }
+
+  handleInput() {
+    this.clearManualTypingMessage()
+    this.typing()
+  }
+
+  handleFocus() {
+    if (!this.isMobile()) return
+    this.adjustForKeyboard()
+    if (window.visualViewport) {
+      this.visualViewportHandler = () => this.adjustForKeyboard()
+      window.visualViewport.addEventListener('resize', this.visualViewportHandler)
+    }
+  }
+
+  handleBlur() {
+    this.stoppedTyping()
+    if (this.typingTimeoutHandle) {
+      clearTimeout(this.typingTimeoutHandle)
+      this.typingTimeoutHandle = null
+    }
+    this.element.style.bottom = ''
+    if (window.visualViewport && this.visualViewportHandler) {
+      window.visualViewport.removeEventListener('resize', this.visualViewportHandler)
+      this.visualViewportHandler = null
+    }
+  }
+
+  resetTypingTimeout() {
+    if (this.typingTimeoutHandle) clearTimeout(this.typingTimeoutHandle)
+    this.typingTimeoutHandle = setTimeout(() => this.stoppedTyping(), TYPING_TIMEOUT)
+  }
+
+  adjustForKeyboard() {
+    if (!this.isMobile()) return
+    let inset = 0
+    if (window.visualViewport) {
+      const vv = window.visualViewport
+      inset = window.innerHeight - (vv.height + vv.offsetTop)
+      if (inset < 0) inset = 0
+    }
+    this.element.style.bottom = `${inset}px`
+  }
+
+  isMobile() {
+    return window.innerWidth <= 600
+  }
+
+  updateReadReceiptPresence(presentIds = []) {
+    const avatars = this.element.querySelectorAll('.read-receipt-avatars .comment-presence-avatar')
+    const presentLookup = new Set(presentIds)
+
+    avatars.forEach((avatar) => {
+      const userId = parseInt(avatar.dataset.userId, 10)
+      if (Number.isNaN(userId)) return
+      if (presentLookup.has(userId)) {
+        avatar.classList.remove('inactive')
+      } else {
+        avatar.classList.add('inactive')
+      }
+    })
+  }
+}

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

@@ -0,0 +1,338 @@
+import { Controller } from "@hotwired/stimulus"
+import { createSubscription } from "../../services/cable"
+
+export default class extends Controller {
+    static targets = ["list"]
+
+    connect() {
+        this.topics = []
+        this.canManageTopics = false
+        this.subscribedCreativeId = null
+        this.topicsSubscription = null
+        // Initial load if creativeId is available (e.g. from dataset if set server-side)
+        if (this.creativeId) {
+            this.loadTopics()
+            this.subscribe()
+        }
+        this.handleNewMessage = this.handleNewMessage.bind(this)
+        window.addEventListener('comments--topics:new-message', this.handleNewMessage)
+    }
+
+    disconnect() {
+        window.removeEventListener('comments--topics:new-message', this.handleNewMessage)
+        this.unsubscribe()
+    }
+
+    onPopupOpened({ creativeId }) {
+        this.creativeIdValue = creativeId
+        this.subscribe()
+        return this.loadTopics()
+    }
+
+    onPopupClosed() {
+        this.unsubscribe()
+        this.creativeIdValue = null
+    }
+
+    get creativeId() {
+        if (this.creativeIdValue) return this.creativeIdValue
+
+        // Fallback: Check dataset (updated by popup controller)
+        if (this.element.dataset.creativeId) return this.element.dataset.creativeId
+
+        // Fallback: URL/DOM checks
+        const treeUrl = document.getElementById("creatives")?.dataset?.creativesTreeUrlValue
+        if (treeUrl) {
+            const urlParams = new URLSearchParams(treeUrl.split('?')[1]);
+            return urlParams.get('parent_id') || urlParams.get('id');
+        }
+        const match = window.location.pathname.match(/\/creatives\/(\d+)/)
+        return match ? match[1] : null
+    }
+
+    async loadTopics() {
+        if (!this.creativeId) return
+
+        try {
+            const response = await fetch(`/creatives/${this.creativeId}/topics`)
+            if (response.ok) {
+                const data = await response.json()
+                const topics = Array.isArray(data) ? data : data.topics
+                const canManage = Array.isArray(data) ? false : data.can_manage
+                this.topics = topics
+                this.canManageTopics = canManage
+                this.renderTopics(this.topics, this.canManageTopics)
+                this.restoreSelection()
+            }
+        } catch (e) {
+            console.error("Failed to load topics", e)
+        }
+    }
+
+    restoreSelection() {
+        const lastTopicId = this.currentTopicId
+        if (lastTopicId) {
+            // Validate it exists in list
+            const exists = this.listTarget.querySelector(`[data-id="${lastTopicId}"]`)
+            if (exists) {
+                this.selectTopic(lastTopicId)
+                return
+            }
+        }
+
+        if (lastTopicId) {
+            this.selectTopic("")
+        }
+    }
+
+    renderTopics(topics, canManage = false) {
+        let html = `<span class="topic-tag ${this.currentTopicId ? '' : 'active'}" data-action="click->comments--topics#select" 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}">
+                        #${topic.name}`
+
+            if (canManage) {
+                html += `<button class="delete-topic-btn" data-action="click->comments--topics#deleteTopic" data-id="${topic.id}">&times;</button>`
+            }
+
+            html += `</span>`
+        })
+
+        // Add create button container
+        if (canManage) {
+            html += `<span class="topic-creation-container" data-comments--topics-target="creationContainer">
+                  <button class="add-topic-btn" data-action="click->comments--topics#showInput">+</button>
+                 </span>`
+        }
+
+        this.listTarget.innerHTML = html
+    }
+
+    async deleteTopic(event) {
+        event.stopPropagation()
+        const confirmText = this.listTarget.dataset.confirmDeleteText || "This will delete all messages in this topic. Are you sure?"
+        if (!confirm(confirmText)) return
+
+        const topicId = event.target.dataset.id
+        if (!topicId) return
+
+        try {
+            const response = await fetch(`/creatives/${this.creativeId}/topics/${topicId}`, {
+                method: 'DELETE',
+                headers: {
+                    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
+                }
+            })
+
+            if (response.ok) {
+                if (String(this.currentTopicId) === String(topicId)) {
+                    this.currentTopicId = "" // Switch to Main
+                    this.dispatch("change", { detail: { topicId: "" } })
+                }
+                this.loadTopics()
+            } else {
+                alert("Failed to delete topic")
+            }
+        } catch (e) {
+            console.error("Error deleting topic", e)
+        }
+    }
+
+    showInput(event) {
+        event.preventDefault()
+        const container = this.element.querySelector('[data-comments--topics-target="creationContainer"]')
+        if (!container) return
+
+        const placeholder = this.listTarget.dataset.newTopicPlaceholder || "New Topic"
+        container.innerHTML = `<input type="text" class="topic-input" placeholder="${placeholder}" 
+                                  data-action="keydown->comments--topics#handleInputKey blur->comments--topics#resetInput"
+                                  data-comments--topics-target="input">`
+
+        const input = container.querySelector('input')
+        requestAnimationFrame(() => input.focus())
+    }
+
+    resetInput() {
+        // Small delay to allow enter key to process first if that was the cause
+        setTimeout(() => {
+            const container = this.element.querySelector('[data-comments--topics-target="creationContainer"]')
+            if (container && !this.creating) {
+                container.innerHTML = `<button class="add-topic-btn" data-action="click->comments--topics#showInput">+</button>`
+            }
+        }, 200)
+    }
+
+    handleInputKey(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault()
+            const name = event.target.value.trim()
+            if (name) {
+                this.createTopic(name)
+            } else {
+                this.resetInput()
+            }
+        } else if (event.key === 'Escape') {
+            this.resetInput()
+        }
+    }
+
+    select(event) {
+        // Ignore if clicking on delete button (though stopPropagation should handle it)
+        if (event.target.closest('.delete-topic-btn')) return
+
+        const id = event.currentTarget.dataset.id
+        this.selectTopic(id)
+    }
+
+    selectTopic(id) {
+        this.updateSelectionUI(id)
+        if (id) {
+            this.clearNewMessageBadge(id)
+        }
+        // Dispatch event
+        this.dispatch("change", { detail: { topicId: id } })
+    }
+
+    updateSelectionUI(id) {
+        this.currentTopicId = id
+        // Update UI
+        this.listTarget.querySelectorAll('.topic-tag').forEach(el => {
+            el.classList.toggle('active', String(el.dataset.id) === String(id))
+            if (String(el.dataset.id) === String(id)) {
+                el.classList.remove('has-new-messages')
+            }
+        })
+    }
+
+    handleNewMessage(event) {
+        const topicId = event.detail.topicId
+        if (!topicId) return
+
+        // Don't show badge if we are currently in this topic (shouldn't happen due to list_controller logic, but safety check)
+        if (String(this.currentTopicId) === String(topicId)) return
+
+        const topicEl = this.listTarget.querySelector(`.topic-tag[data-id="${topicId}"]`)
+        if (topicEl) {
+            topicEl.classList.add('has-new-messages')
+        }
+    }
+
+    clearNewMessageBadge(topicId) {
+        const topicEl = this.listTarget.querySelector(`.topic-tag[data-id="${topicId}"]`)
+        if (topicEl) {
+            topicEl.classList.remove('has-new-messages')
+        }
+    }
+
+    async createTopic(name) {
+        if (!this.creativeId) return
+
+        this.creating = true // Prevent blur from resetting immediately
+
+        try {
+            const response = await fetch(`/creatives/${this.creativeId}/topics`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
+                },
+                body: JSON.stringify({ topic: { name } })
+            })
+
+            if (response.ok) {
+                const topic = await response.json()
+                this.currentTopicId = topic.id
+                await this.loadTopics()
+                // Dispatch change event manually since we skipped the click handler
+                this.dispatch("change", { detail: { topicId: topic.id } })
+            } else {
+                alert("Failed to create topic")
+            }
+        } catch (e) {
+            console.error("Error creating topic", e)
+        } finally {
+            this.creating = false
+        }
+    }
+
+    get currentTopicId() {
+        const urlParams = new URLSearchParams(window.location.search)
+        const urlTopicId = urlParams.get('topic_id')
+        if (urlTopicId) return urlTopicId
+
+        return localStorage.getItem(`collavre_creative_${this.creativeId}_last_topic`) || ""
+    }
+
+    set currentTopicId(id) {
+        if (id) {
+            localStorage.setItem(`collavre_creative_${this.creativeId}_last_topic`, id)
+        } else {
+            localStorage.removeItem(`collavre_creative_${this.creativeId}_last_topic`)
+        }
+    }
+
+    subscribe() {
+        const creativeId = this.creativeId
+        if (!creativeId) return
+
+        if (this.topicsSubscription && this.subscribedCreativeId === String(creativeId)) return
+
+        this.unsubscribe()
+
+        this.subscribedCreativeId = String(creativeId)
+        this.topicsSubscription = createSubscription(
+            { channel: 'TopicsChannel', creative_id: this.creativeId },
+            {
+                received: (data) => this.handleTopicMessage(data)
+            }
+        )
+    }
+
+    unsubscribe() {
+        if (this.topicsSubscription) {
+            this.topicsSubscription.unsubscribe()
+            this.topicsSubscription = null
+        }
+        this.subscribedCreativeId = null
+    }
+
+    handleTopicMessage(data) {
+        if (!data) return
+
+        const action = data.action || "created"
+        if (action === "deleted") {
+            this.removeTopic(data.topic_id)
+            return
+        }
+
+        if (!data.topic) return
+
+        const topics = this.topics || []
+        const exists = topics.some((topic) => String(topic.id) === String(data.topic.id))
+        if (exists) return
+
+        this.topics = [...topics, data.topic]
+        this.renderTopics(this.topics, this.canManageTopics)
+        this.restoreSelection()
+    }
+
+    removeTopic(topicId) {
+        if (!topicId) return
+
+        const topics = this.topics || []
+        const nextTopics = topics.filter((topic) => String(topic.id) !== String(topicId))
+        if (nextTopics.length === topics.length) return
+
+        this.topics = nextTopics
+        if (String(this.currentTopicId) === String(topicId)) {
+            this.currentTopicId = ""
+            this.dispatch("change", { detail: { topicId: "" } })
+        }
+
+        this.renderTopics(this.topics, this.canManageTopics)
+        this.restoreSelection()
+    }
+}

data/app/javascript/controllers/common_popup_controller.js

@@ -0,0 +1,55 @@
+import { Controller } from '@hotwired/stimulus'
+import CommonPopup from '../lib/common_popup'
+
+export default class extends Controller {
+    static targets = ['list']
+    static values = {
+        closeOnOutsideClick: { type: Boolean, default: true }
+    }
+
+    connect() {
+        this.popup = new CommonPopup(this.element, {
+            listElement: this.listTarget,
+            onSelect: this.select.bind(this),
+            onClose: this.dispatchClose.bind(this),
+            closeOnOutsideClick: this.closeOnOutsideClickValue,
+            renderItem: this.renderItem.bind(this)
+        })
+    }
+
+    disconnect() {
+        this.popup?.hide()
+        this.popup = null
+    }
+
+    open(anchorRect) {
+        this.popup.showAt(anchorRect)
+    }
+
+    close() {
+        this.popup.hide()
+    }
+
+    setItems(items) {
+        this.popup.setItems(items)
+    }
+
+    handleKey(event) {
+        return this.popup.handleKey(event)
+    }
+
+    // To be overridden or configured via callbacks if needed, 
+    // but for now we dispatch an event that the parent controller can listen to.
+    select(item) {
+        this.dispatch('select', { detail: { item } })
+    }
+
+    dispatchClose(reason) {
+        this.dispatch('close', { detail: { reason } })
+    }
+
+    // Default renderer, can be overridden by extending class or passing a specific renderer
+    renderItem(item) {
+        return item.label || item.value || JSON.stringify(item)
+    }
+}