collavre 0.2.3 → 0.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d5c931501423b83339fe8760249bae4ff611eb1ab835167dade3a6d8ee587630
-  data.tar.gz: dd34bc4c214b8a5df3cbfd189ca3dd22aa47fcf22eaa4974a63fd23b2bc8754a
+  metadata.gz: 35c8808cc85f9a6a43fc6800c660850f2725137c805765436f7439dd6b75e07c
+  data.tar.gz: f6783666bfa9dc57128f4e5497d1e5267dfbf0de47cc9f0a8d95b021f1e35843
 SHA512:
-  metadata.gz: ada88101f9013822d0aa944d16b040db4e2ce954fc1c5fd055c391a222a273d3e469a99c7f7ab255bc5ad2bc149e93dd72cdf3d597f49957ae825d3fd93fa89a
-  data.tar.gz: be1b0f2704a49f5cf446f639dc197d0d69fef529595e2b4a46401a4caa801c5ac44cb1df2a14799ee043e7021648f495ff41e16133b2a0a9936e7542f5af0b1e
+  metadata.gz: ed9266ed122d64cedc2fbda308d3400d837776bb60a71b39a21c3a717bf5dad6ecfb2fda336928fa1ac112bb59c5fda5171f627583648a353d53fe5dbc2508c4
+  data.tar.gz: f46c41dde92548ff415f9eaa5b233f8d35af31f69ad7859c122a4e7cca52d992b6459f147af270652193e5db815fcd7669a632eee5928480d3a1babd9960e028

data/app/assets/stylesheets/collavre/comments_popup.css

@@ -9,38 +9,23 @@
     max-height: 80vh;
     min-width: 200px;
     min-height: 200px;
-    transition: all 0.2s;
+    transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease,
+                right 0.25s ease, bottom 0.25s ease, border-radius 0.25s ease,
+                box-shadow 0.25s ease, padding 0.25s ease;
     max-width: calc(100vw - 0.5em) !important;
 }
 
 body.chat-fullscreen {
-    margin: 0;
-    padding: 0;
-    height: 100vh;
     overflow: hidden;
 }
 
-body.chat-fullscreen main {
-    height: 100vh;
-    width: 100vw;
-    max-width: none;
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-}
-
-.comments-fullscreen-page {
-    height: 100vh;
-    width: 100vw;
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-}
-
-.comments-fullscreen-page #comments-popup,
 #comments-popup[data-fullscreen="true"] {
     display: flex !important;
-    position: static;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     width: 100%;
     height: 100%;
     max-width: none !important;
@@ -48,7 +33,7 @@ body.chat-fullscreen main {
     border-radius: 0;
     box-shadow: none;
     border: none;
-    z-index: auto;
+    z-index: 9999;
     box-sizing: border-box;
     padding: 1em;
 }
@@ -517,7 +502,9 @@ body.chat-fullscreen main {
 }
 }
 
-.comment-owner-only {
+.comment-owner-only,
+.comment-delete-hidden,
+.comment-approve-hidden {
     display: none;
 }
 
@@ -616,13 +603,11 @@ body.chat-fullscreen main {
         transform: translateY(0);
     }
 
-    .comments-fullscreen-page #comments-popup,
     #comments-popup[data-fullscreen="true"] {
         display: flex !important;
         transform: none;
         border-radius: 0;
         padding: 1em;
-        position: static;
         width: 100%;
         height: 100%;
         box-sizing: border-box;

data/app/controllers/collavre/comments_controller.rb

@@ -1,11 +1,19 @@
 module Collavre
   class CommentsController < ApplicationController
-    layout "collavre/chat", only: [ :fullscreen ]
     before_action :set_creative
     before_action :set_comment, only: [ :destroy, :show, :update, :convert, :approve, :update_action ]
 
     def fullscreen
-      @creative_snippet = @creative.creative_snippet
+      # Render the creative index page with comments popup auto-opened in fullscreen.
+      # This way the creative list loads behind the popup, so exiting fullscreen
+      # doesn't require a page reload.
+      @parent_creative = @creative
+      @creatives = []
+      @shared_list = @creative.all_shared_users
+      @auto_fullscreen = true
+      # Prepend creatives prefix so partials like 'add_button' resolve to collavre/creatives/_add_button
+      lookup_context.prefixes.prepend "collavre/creatives"
+      render "collavre/creatives/index"
     end
 
     def index

data/app/javascript/controllers/comment_controller.js

@@ -3,7 +3,7 @@ import { renderCommentMarkdown } from '../lib/utils/markdown'
 
 // Connects to data-controller="comment"
 export default class extends Controller {
-  static targets = ["ownerButton"]
+  static targets = ["ownerButton", "deleteButton", "approveButton", "actionApproveControls"]
 
   connect() {
     const contentElement = this.element.querySelector('.comment-content')
@@ -15,12 +15,39 @@ export default class extends Controller {
 
     this.currentUserId = document.body.dataset.currentUserId
     const commentAuthorId = this.element.dataset.userId
+    const creativeOwnerId = this.element.dataset.creativeOwnerId
+    const isAdmin = document.body.dataset.systemAdmin === 'true'
+    const isOwner = this.currentUserId && commentAuthorId && this.currentUserId === commentAuthorId
+    const isCreativeOwner = this.currentUserId && creativeOwnerId && this.currentUserId === creativeOwnerId
 
-    if (this.currentUserId && commentAuthorId && this.currentUserId === commentAuthorId) {
+    if (isOwner) {
       this.ownerButtonTargets.forEach((button) => {
         button.classList.remove('comment-owner-only')
       })
     }
+
+    // Show delete button if user is comment author, creative owner, or admin
+    if (isOwner || isCreativeOwner || isAdmin) {
+      this.deleteButtonTargets.forEach((button) => {
+        button.classList.remove('comment-delete-hidden')
+      })
+    }
+
+    // Show approve button: user must be the designated approver or a system admin
+    const hasPendingAction = this.element.dataset.hasPendingAction === 'true'
+    const approverId = this.element.dataset.approverId
+    const isApprover = this.currentUserId && approverId && this.currentUserId === approverId
+    const canApprove = hasPendingAction && (isApprover || isAdmin)
+
+    if (canApprove) {
+      this.approveButtonTargets.forEach((button) => {
+        button.classList.remove('comment-approve-hidden')
+      })
+      // Also show action block approve controls (edit action button, form)
+      this.actionApproveControlsTargets.forEach((el) => {
+        el.classList.remove('comment-approve-hidden')
+      })
+    }
   }
 
   triggerReactionPicker(event) {

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

@@ -11,7 +11,9 @@ export default class extends Controller {
     'closeButton',
     'leftHandle',
     'rightHandle',
-    'fullscreenLink',
+    'fullscreenButton',
+    'fullscreenIcon',
+    'exitFullscreenIcon',
   ]
 
   connect() {
@@ -31,11 +33,13 @@ export default class extends Controller {
     this.handleOnline = this.handleOnline.bind(this)
     this.handleWindowFocus = this.handleWindowFocus.bind(this)
     this.handleVisibilityChange = this.handleVisibilityChange.bind(this)
+    this.handlePopState = this.handlePopState.bind(this)
 
     document.addEventListener(CREATIVE_CLICK_EVENT, this.handleCreativeClick)
     window.addEventListener('online', this.handleOnline)
     window.addEventListener('focus', this.handleWindowFocus)
     document.addEventListener('visibilitychange', this.handleVisibilityChange)
+    window.addEventListener('popstate', this.handlePopState)
 
     if (this.hasCloseButtonTarget) {
       this.closeButtonTarget.addEventListener('click', () => this.close())
@@ -61,7 +65,21 @@ export default class extends Controller {
       form.addEventListener('submit', () => window.localStorage.removeItem(SIZE_STORAGE_KEY))
     })
 
-    if (this.isFullscreen()) {
+    if (this.element.dataset.autoFullscreen === 'true') {
+      // Auto-fullscreen: open popup for creative then enter fullscreen
+      delete this.element.dataset.autoFullscreen
+      // Set previous URL to creative page (not the fullscreen URL)
+      const creativeId = this.element.dataset.creativeId
+      if (creativeId) {
+        this._previousUrl = `/creatives/${creativeId}`
+      }
+      requestAnimationFrame(() => {
+        this.openForCreative()
+        this._enterFullscreenImmediate()
+      })
+    } else if (this.isFullscreen()) {
+      // Sync UI for initial fullscreen state (legacy fullscreen page)
+      this._syncFullscreenUI(true)
       // Defer to ensure all sibling controllers are connected
       requestAnimationFrame(() => this.openForCreative())
     } else {
@@ -75,6 +93,7 @@ export default class extends Controller {
     window.removeEventListener('online', this.handleOnline)
     window.removeEventListener('focus', this.handleWindowFocus)
     document.removeEventListener('visibilitychange', this.handleVisibilityChange)
+    window.removeEventListener('popstate', this.handlePopState)
     window.removeEventListener('mousemove', this.handleResizeMove)
     window.removeEventListener('mouseup', this.handleResizeStop)
     if (this.isMobile()) {
@@ -131,8 +150,6 @@ export default class extends Controller {
     this.element.dataset.canComment = canComment ? 'true' : 'false'
     this.titleTarget.textContent = snippet
 
-    this.updateFullscreenLink(resolvedCreativeId)
-
     this.prepareSize()
 
     this.showPopup()
@@ -161,8 +178,6 @@ export default class extends Controller {
     this.element.dataset.canComment = canComment ? 'true' : 'false'
     this.titleTarget.textContent = snippet
 
-    this.updateFullscreenLink(resolvedCreativeId)
-
     this.showPopup()
 
     await this.notifyChildControllers({ creativeId: resolvedCreativeId, canComment })
@@ -388,11 +403,304 @@ export default class extends Controller {
     }
   }
 
-  updateFullscreenLink(creativeId) {
-    if (!this.hasFullscreenLinkTarget || !creativeId) return
-    const template = this.element.dataset.fullscreenUrlTemplate
-    if (!template) return
-    this.fullscreenLinkTarget.href = template.replace('__CREATIVE_ID__', creativeId)
+  // Enter fullscreen immediately without animation (for auto-fullscreen on page load)
+  _enterFullscreenImmediate() {
+    const el = this.element
+    el.style.transition = 'none'
+    el.dataset.fullscreen = 'true'
+    document.body.classList.add('chat-fullscreen')
+    this._syncFullscreenUI(true)
+    // Clear any inline position styles so CSS fullscreen rules apply
+    el.style.top = ''
+    el.style.left = ''
+    el.style.right = ''
+    el.style.bottom = ''
+    el.style.width = ''
+    el.style.height = ''
+    el.style.position = ''
+    // Force layout then restore transition
+    el.offsetHeight // eslint-disable-line no-unused-expressions
+    el.style.transition = ''
+
+    // URL is already /comments/fullscreen, no pushState needed
+    requestAnimationFrame(() => this.listController?.scrollToBottom())
+  }
+
+  toggleFullscreen() {
+    const entering = !this.isFullscreen()
+    const el = this.element
+
+    if (entering) {
+      // Save current inline styles for later restore
+      this._savedStyles = {
+        top: el.style.top,
+        right: el.style.right,
+        left: el.style.left,
+        width: el.style.width,
+        height: el.style.height,
+      }
+
+      // Capture current visual position
+      const rect = el.getBoundingClientRect()
+
+      // Disable transition, pin to current position as fixed
+      el.style.transition = 'none'
+      el.style.position = 'fixed'
+      el.style.top = `${rect.top}px`
+      el.style.left = `${rect.left}px`
+      el.style.right = 'auto'
+      el.style.width = `${rect.width}px`
+      el.style.height = `${rect.height}px`
+
+      // Force layout so the pinned position is applied
+      el.offsetHeight // eslint-disable-line no-unused-expressions
+
+      // Now enable transition and expand to fullscreen
+      el.style.transition = ''
+      el.dataset.fullscreen = 'true'
+      document.body.classList.add('chat-fullscreen')
+      this._syncFullscreenUI(true)
+
+      // Clear inline position so CSS fullscreen rules take over
+      el.style.top = '0'
+      el.style.left = '0'
+      el.style.right = '0'
+      el.style.bottom = '0'
+      el.style.width = '100%'
+      el.style.height = '100%'
+
+      // Update URL
+      const creativeId = el.dataset.creativeId
+      if (creativeId) {
+        this._previousUrl = window.location.href
+        const fullscreenPath = `/creatives/${creativeId}/comments/fullscreen`
+        window.history.pushState({ fullscreen: true }, '', fullscreenPath)
+      }
+
+      // Clean up inline styles after transition ends
+      const cleanup = () => {
+        el.removeEventListener('transitionend', cleanup)
+        el.style.top = ''
+        el.style.left = ''
+        el.style.right = ''
+        el.style.bottom = ''
+        el.style.width = ''
+        el.style.height = ''
+        el.style.position = ''
+      }
+      el.addEventListener('transitionend', cleanup, { once: true })
+      // Fallback if transitionend doesn't fire
+      setTimeout(cleanup, 300)
+
+    } else {
+      const savedStyles = this._savedStyles
+      this._savedStyles = null
+
+      // Calculate target position using the same logic as updatePosition()
+      // so cleanup can apply it directly without calling updatePosition() (which would cause a snap)
+      const creativeId = el.dataset.creativeId
+      const scrollY = window.scrollY || window.pageYOffset
+
+      // Final absolute-position values (what updatePosition would set)
+      let finalTop = ''      // px string with scrollY included
+      let finalRight = ''    // px string
+      let finalWidth = savedStyles?.width || ''
+      let finalHeight = savedStyles?.height || ''
+
+      // Fixed-position animation targets (viewport-relative)
+      let animTop, animLeft, animWidth, animHeight
+
+      // Try to find the comment button for precise positioning
+      let targetButton = this.currentButton
+      if (!targetButton && creativeId) {
+        const row = document.querySelector(`creative-tree-row[creative-id="${creativeId}"]`)
+        targetButton = row?.querySelector('.comments-btn')
+      }
+
+      if (targetButton) {
+        this.currentButton = targetButton
+        const btnRect = targetButton.getBoundingClientRect()
+        const rightPx = window.innerWidth - btnRect.right + 24
+
+        animWidth = parseFloat(finalWidth) || 420
+        animHeight = parseFloat(finalHeight) || 640
+
+        // Calculate top in absolute coords (with scrollY) — same as updatePosition
+        let absTop = btnRect.bottom + scrollY + 4
+        const absBottom = absTop + animHeight
+        const viewportBottom = scrollY + window.innerHeight
+        if (absBottom > viewportBottom) {
+          absTop = Math.max(scrollY + 4, viewportBottom - animHeight - 4)
+        }
+
+        // Store final absolute-position values for cleanup
+        finalTop = `${absTop}px`
+        finalRight = `${rightPx}px`
+
+        // Convert to fixed coordinates for animation
+        animTop = absTop - scrollY
+        animLeft = window.innerWidth - rightPx - animWidth
+      } else if (savedStyles && Object.values(savedStyles).some(v => v)) {
+        // Fallback to saved styles
+        const rightVal = parseFloat(savedStyles.right) || 32
+        animWidth = parseFloat(savedStyles.width) || 420
+        animHeight = parseFloat(savedStyles.height) || 640
+        animLeft = savedStyles.left ? parseFloat(savedStyles.left) : (window.innerWidth - rightVal - animWidth)
+        animTop = parseFloat(savedStyles.top) ? (parseFloat(savedStyles.top) - scrollY) : 100
+
+        finalTop = savedStyles.top || ''
+        finalRight = savedStyles.right || ''
+      } else {
+        // No reference at all: use CSS defaults
+        animWidth = 420
+        animHeight = 640
+        animLeft = window.innerWidth - 32 - animWidth  // right: 2em
+        animTop = 100
+      }
+
+      // Animated exit: pin at fullscreen position, then shrink to target
+      const fsRect = el.getBoundingClientRect()
+
+      el.style.transition = 'none'
+      el.style.position = 'fixed'
+      el.style.top = `${fsRect.top}px`
+      el.style.left = `${fsRect.left}px`
+      el.style.right = 'auto'
+      el.style.bottom = 'auto'
+      el.style.width = `${fsRect.width}px`
+      el.style.height = `${fsRect.height}px`
+
+      el.dataset.fullscreen = 'false'
+      document.body.classList.remove('chat-fullscreen')
+      this._syncFullscreenUI(false)
+
+      // Force layout so the pinned position is applied
+      el.offsetHeight // eslint-disable-line no-unused-expressions
+
+      // Animate to target position (fixed coordinates)
+      el.style.transition = ''
+      el.style.top = `${animTop}px`
+      el.style.left = `${animLeft}px`
+      el.style.width = `${animWidth}px`
+      el.style.height = `${animHeight}px`
+
+      const cleanup = () => {
+        el.removeEventListener('transitionend', cleanup)
+        // Switch from fixed back to default (absolute) positioning
+        // Apply the pre-calculated absolute coords directly — no updatePosition() needed
+        el.style.transition = 'none'
+        el.style.position = ''
+        el.style.bottom = ''
+
+        if (targetButton) {
+          // Set absolute coords matching updatePosition output
+          el.style.top = finalTop
+          el.style.right = finalRight
+          el.style.left = ''
+          el.style.width = finalWidth
+          el.style.height = finalHeight
+        } else if (savedStyles) {
+          el.style.top = ''
+          el.style.left = ''
+          el.style.right = ''
+          el.style.width = ''
+          el.style.height = ''
+          Object.assign(el.style, savedStyles)
+        } else {
+          el.style.top = ''
+          el.style.left = ''
+          el.style.right = ''
+          el.style.width = ''
+          el.style.height = ''
+        }
+
+        // Force layout then restore transitions
+        el.offsetHeight // eslint-disable-line no-unused-expressions
+        el.style.transition = ''
+
+        // Scroll active topic into view after popup has settled at final size
+        this.topicsController?.scrollToActiveTopic()
+      }
+      el.addEventListener('transitionend', cleanup, { once: true })
+      setTimeout(cleanup, 300)
+
+      // Update URL — append open_comments=true so the popup stays open on refresh
+      let backUrl = this._previousUrl || (creativeId ? `/creatives/${creativeId}` : null)
+      if (backUrl) {
+        const url = new URL(backUrl, window.location.origin)
+        url.searchParams.set('open_comments', 'true')
+        window.history.pushState({ fullscreen: false }, '', url.pathname + url.search)
+      }
+      this._previousUrl = null
+
+      // Scroll the selected creative row into view after exiting fullscreen
+      if (creativeId) {
+        requestAnimationFrame(() => {
+          const row = document.querySelector(`creative-tree-row[creative-id="${creativeId}"]`)
+          row?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        })
+      }
+    }
+
+    // Scroll to bottom after layout change
+    requestAnimationFrame(() => {
+      this.listController?.scrollToBottom()
+    })
+  }
+
+  handlePopState(event) {
+    const isFs = event.state?.fullscreen === true
+    if (isFs !== this.isFullscreen()) {
+      const el = this.element
+      // Clear any animation inline styles to avoid stale positions
+      el.style.transition = 'none'
+      el.style.position = ''
+      el.style.top = ''
+      el.style.left = ''
+      el.style.right = ''
+      el.style.bottom = ''
+      el.style.width = ''
+      el.style.height = ''
+
+      el.dataset.fullscreen = isFs ? 'true' : 'false'
+      document.body.classList.toggle('chat-fullscreen', isFs)
+      this._syncFullscreenUI(isFs)
+
+      if (!isFs && this._savedStyles) {
+        Object.assign(el.style, this._savedStyles)
+        this._savedStyles = null
+      }
+
+      // Restore transition
+      el.offsetHeight // eslint-disable-line no-unused-expressions
+      el.style.transition = ''
+
+      requestAnimationFrame(() => this.listController?.scrollToBottom())
+    }
+  }
+
+  _syncFullscreenUI(entering) {
+    if (this.hasFullscreenIconTarget) {
+      this.fullscreenIconTarget.style.display = entering ? 'none' : ''
+    }
+    if (this.hasExitFullscreenIconTarget) {
+      this.exitFullscreenIconTarget.style.display = entering ? '' : 'none'
+    }
+    if (this.hasLeftHandleTarget) {
+      this.leftHandleTarget.style.display = entering ? 'none' : ''
+    }
+    if (this.hasRightHandleTarget) {
+      this.rightHandleTarget.style.display = entering ? 'none' : ''
+    }
+    if (this.hasCloseButtonTarget) {
+      this.closeButtonTarget.style.display = entering ? 'none' : ''
+    }
+    if (this.hasFullscreenButtonTarget) {
+      const label = entering
+        ? (this.element.dataset.exitFullscreenLabel || 'Exit full screen')
+        : (this.element.dataset.fullscreenLabel || 'Full screen')
+      this.fullscreenButtonTarget.setAttribute('aria-label', label)
+    }
   }
 
   openFromUrl() {

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

@@ -86,7 +86,7 @@ export default class extends Controller {
     }
 
     renderTopics(topics, canManage = false) {
-        const dragActions = canManage 
+        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'
@@ -150,11 +150,11 @@ export default class extends Controller {
         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 
-            } 
+        this.dispatch('move-to-topic', {
+            detail: {
+                commentIds,
+                targetTopicId
+            }
         })
     }
 
@@ -170,7 +170,7 @@ export default class extends Controller {
         this.draggingTopicId = topicId
         event.dataTransfer.setData('application/x-topic-id', topicId)
         event.dataTransfer.effectAllowed = 'move'
-        
+
         requestAnimationFrame(() => {
             topicEl.classList.add('topic-dragging')
         })
@@ -213,7 +213,7 @@ export default class extends Controller {
 
     async handleTopicReorderDrop(event) {
         event.preventDefault()
-        
+
         const targetEl = event.currentTarget
         targetEl.classList.remove('topic-drag-over-left', 'topic-drag-over-right')
 
@@ -356,13 +356,13 @@ export default class extends Controller {
         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)
     }
 
@@ -380,15 +380,15 @@ export default class extends Controller {
         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()
@@ -476,6 +476,13 @@ export default class extends Controller {
         }
     }
 
+    scrollToActiveTopic() {
+        const activeEl = this.listTarget.querySelector('.topic-tag.active')
+        if (activeEl) {
+            activeEl.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
+        }
+    }
+
     handleNewMessage(event) {
         const topicId = event.detail.topicId
         if (!topicId) return

data/app/javascript/lib/utils/markdown.js

@@ -1,17 +1,18 @@
 import { marked } from 'marked'
+import DOMPurify from 'dompurify'
 
 export function renderMarkdown(html) {
-  return marked.parse(html)
+  return DOMPurify.sanitize(marked.parse(html))
 }
 
 export function renderMarkdownInline(html) {
-  return marked.parseInline(html)
+  return DOMPurify.sanitize(marked.parseInline(html))
 }
 
 export function renderCommentMarkdown(text) {
   const content = text || ''
   const html = content.includes('\n') ? marked.parse(content) : marked.parseInline(content)
-  return html.trim()
+  return DOMPurify.sanitize(html.trim())
 }
 
 export function renderMarkdownInContainer(container) {

data/app/views/collavre/comments/_comment.html.erb

@@ -1,6 +1,8 @@
 <% comment_topic = comment.topic %>
 <% current_topic_id = local_assigns[:current_topic_id] %>
-<div class="comment-item" id="<%= dom_id(comment) %>" data-controller="comment" data-user-id="<%= comment.user&.id %>" data-comment-id="<%= comment.id %>" data-topic-id="<%= comment_topic&.id %>" data-creative-id="<%= comment.creative_id %>">
+<% has_pending_action = comment.action.present? && comment.action_executed_at.blank? %>
+<% approver_id = comment.approver_id %>
+<div class="comment-item" id="<%= dom_id(comment) %>" data-controller="comment" data-user-id="<%= comment.user&.id %>" data-comment-id="<%= comment.id %>" data-topic-id="<%= comment_topic&.id %>" data-creative-id="<%= comment.creative_id %>" data-creative-owner-id="<%= comment.creative&.user_id %>" data-has-pending-action="<%= has_pending_action %>" data-approver-id="<%= approver_id %>">
   <div class="comment-select">
     <input type="checkbox"
            class="comment-select-checkbox"
@@ -49,9 +51,8 @@
       <button class="<%= ['convert-comment-btn', ('comment-owner-only' unless can_convert_comment)].compact.join(' ') %>" data-comment-target="ownerButton" data-comment-id="<%= comment.id %>" title="<%= t('collavre.comments.convert_to_creative') %>">
         <%= t('collavre.comments.convert_button') %>
       </button>
-      <% can_approve = comment.approval_status(Current.user) == :ok %>
-      <% if can_approve %>
-        <button class="approve-comment-btn" data-comment-id="<%= comment.id %>" title="<%= t('collavre.comments.approve_button') %>">
+      <% if has_pending_action %>
+        <button class="approve-comment-btn comment-approve-hidden" data-comment-target="approveButton" data-comment-id="<%= comment.id %>" title="<%= t('collavre.comments.approve_button') %>">
           <%= t('collavre.comments.approve_button') %>
         </button>
       <% end %>
@@ -61,12 +62,9 @@
       <button class="copy-comment-link-btn" data-comment-id="<%= comment.id %>" data-comment-url="<%= collavre.creative_comment_url(comment.creative, comment, Rails.application.config.action_mailer.default_url_options) %>" title="<%= t('collavre.comments.copy_link_button') %>">
         <%= t('collavre.comments.copy_link_button') %>
       </button>
-      <% can_delete = comment.user == Current.user || comment.creative.user == Current.user || comment.creative.has_permission?(Current.user, :admin) %>
-      <% if can_delete %>
-        <button class="delete-comment-btn" data-comment-id="<%= comment.id %>" title="<%= t('collavre.comments.delete') %>">
-          <%= t('collavre.comments.delete_button') %>
-        </button>
-      <% end %>
+      <button class="delete-comment-btn comment-delete-hidden" data-comment-target="deleteButton" data-comment-id="<%= comment.id %>" title="<%= t('collavre.comments.delete') %>">
+        <%= t('collavre.comments.delete_button') %>
+      </button>
     </div>
   <div class="comment-content"><%= comment.content %></div>
 
@@ -118,15 +116,17 @@
         <summary class="comment-action-summary"><%= t("collavre.comments.action_summary") %></summary>
         <div class="comment-action-body">
           <pre class="comment-action-json" data-comment-action-json><%= formatted_comment_action(comment) %></pre>
-          <% if can_approve && comment.action_executed_at.blank? %>
-            <button class="edit-comment-action-btn" type="button" data-comment-id="<%= comment.id %>"><%= t("collavre.comments.edit_action_button") %></button>
-            <form class="comment-action-edit-form" data-comment-id="<%= comment.id %>" style="display:none;">
-              <textarea class="comment-action-edit-textarea" name="comment[action]" rows="8"><%= formatted_comment_action(comment) %></textarea>
-              <div class="comment-action-edit-buttons">
-                <button class="cancel-comment-action-edit-btn" type="button"><%= t("app.cancel") %></button>
-                <button class="save-comment-action-btn" type="submit"><%= t("app.save") %></button>
-              </div>
-            </form>
+          <% if has_pending_action %>
+            <div class="comment-action-approve-controls comment-approve-hidden" data-comment-target="actionApproveControls">
+              <button class="edit-comment-action-btn" type="button" data-comment-id="<%= comment.id %>"><%= t("collavre.comments.edit_action_button") %></button>
+              <form class="comment-action-edit-form" data-comment-id="<%= comment.id %>" style="display:none;">
+                <textarea class="comment-action-edit-textarea" name="comment[action]" rows="8"><%= formatted_comment_action(comment) %></textarea>
+                <div class="comment-action-edit-buttons">
+                  <button class="cancel-comment-action-edit-btn" type="button"><%= t("app.cancel") %></button>
+                  <button class="save-comment-action-btn" type="submit"><%= t("app.save") %></button>
+                </div>
+              </form>
+            </div>
           <% end %>
         </div>
       </details>

data/app/views/collavre/comments/_comments_popup.html.erb

@@ -1,13 +1,17 @@
 
 <% fullscreen = local_assigns.fetch(:fullscreen, false) %>
+<% auto_fullscreen = local_assigns.fetch(:auto_fullscreen, false) %>
 <% creative = local_assigns[:creative] %>
 <div id="comments-popup" data-controller="comments--popup comments--list comments--form comments--presence comments--mention-menu comments--topics" class="popup-box"
      data-fullscreen="<%= fullscreen %>"
-     data-fullscreen-url-template="<%= collavre.fullscreen_creative_comments_path(creative_id: "__CREATIVE_ID__") %>"
-     <% if fullscreen && creative.present? %>
-     data-creative-id="<%= creative.id %>"
-     data-creative-snippet="<%= creative.creative_snippet %>"
-     data-can-comment="<%= creative.has_permission?(Current.user, :feedback) %>"
+     <% if auto_fullscreen %>data-auto-fullscreen="true"<% end %>
+     data-fullscreen-label="<%= t('collavre.comments.fullscreen', default: 'Full screen') %>"
+     data-exit-fullscreen-label="<%= t('collavre.comments.exit_fullscreen', default: 'Exit full screen') %>"
+     <% popup_creative = creative || (@parent_creative if auto_fullscreen) %>
+     <% if (fullscreen || auto_fullscreen) && popup_creative.present? %>
+     data-creative-id="<%= popup_creative.id %>"
+     data-creative-snippet="<%= popup_creative.creative_snippet %>"
+     data-can-comment="<%= popup_creative.has_permission?(Current.user, :feedback) %>"
      <% end %>
      data-loading-text="<%= t('app.loading') %>"
      data-delete-confirm-text="<%= t("collavre.comments.delete_confirm") %>"
@@ -28,29 +32,25 @@
      data-hint-drag-topic-text="<%= t('collavre.comments.hint_drag_topic') %>"
      data-hint-move-button-text="<%= t('collavre.comments.hint_move_button') %>"
      data-add-participant-text="<%= t('collavre.comments.add_participant') %>">
-  <% unless fullscreen %>
-    <div class="resize-handle resize-handle-left" data-comments--popup-target="leftHandle"></div>
-    <div class="resize-handle resize-handle-right" data-comments--popup-target="rightHandle"></div>
-  <% end %>
+  <div class="resize-handle resize-handle-left" data-comments--popup-target="leftHandle"></div>
+  <div class="resize-handle resize-handle-right" data-comments--popup-target="rightHandle"></div>
   <div class="comments-popup-header">
     <h3 id="comments-popup-title" data-comments--popup-target="title"><%= fullscreen && creative.present? ? creative.creative_snippet : t('collavre.comments.comments') %></h3>
     <span data-integration-badges class="integration-badges"></span>
     <div class="comments-popup-actions">
-      <% if fullscreen && creative.present? %>
-        <%= link_to collavre.creative_path(creative, open_comments: true),
-                    class: "comments-popup-action comments-popup-fullscreen",
-                    aria: { label: t("collavre.comments.exit_fullscreen", default: "Exit full screen") } do %>
-          <%= svg_tag "exit-fullscreen.svg", class: "comments-popup-action-icon" %>
-        <% end %>
-      <% else %>
-        <%= link_to "#",
-                    class: "comments-popup-action comments-popup-fullscreen",
-                    data: { "comments--popup-target": "fullscreenLink" },
-                    aria: { label: t("collavre.comments.fullscreen", default: "Full screen") } do %>
+      <button class="comments-popup-action comments-popup-fullscreen"
+              data-comments--popup-target="fullscreenButton"
+              data-action="click->comments--popup#toggleFullscreen"
+              type="button"
+              aria-label="<%= t('collavre.comments.fullscreen', default: 'Full screen') %>">
+        <span data-comments--popup-target="fullscreenIcon">
           <%= svg_tag "fullscreen.svg", class: "comments-popup-action-icon" %>
-        <% end %>
-        <button id="close-comments-btn" data-comments--popup-target="closeButton" class="comments-popup-action comments-popup-close" type="button">&times;</button>
-      <% end %>
+        </span>
+        <span data-comments--popup-target="exitFullscreenIcon" style="display:none;">
+          <%= svg_tag "exit-fullscreen.svg", class: "comments-popup-action-icon" %>
+        </span>
+      </button>
+      <button id="close-comments-btn" data-comments--popup-target="closeButton" class="comments-popup-action comments-popup-close" type="button">&times;</button>
     </div>
   </div>
   <div id="comment-participants" data-comments--presence-target="participants" data-comments--mention-menu-target="participants"></div>

data/app/views/collavre/creatives/_github_integration_modal.html.erb

@@ -10,7 +10,7 @@
      data-delete-error="<%= t('collavre.creatives.index.github_integration_delete_error', default: 'Failed to remove the Github integration.') %>"
      data-delete-button-label="<%= t('collavre.creatives.index.github_integration_delete_button', default: 'Remove integration') %>"
      data-delete-select-warning="<%= t('collavre.creatives.index.github_integration_delete_select_warning', default: '삭제할 Repository를 선택하세요.') %>"
-     style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;align-items:center;justify-content:center;">
+     style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10000;align-items:center;justify-content:center;">
   <div class="popup-box" style="min-width:360px;max-width:90vw;">
     <button type="button" id="close-github-modal" class="popup-close-btn">&times;</button>
     <h2><%= t('collavre.creatives.index.github_integration_title', default: 'Configure Github integration') %></h2>

data/app/views/collavre/creatives/_set_plan_modal.html.erb

@@ -1,4 +1,4 @@
-<div id="set-plan-modal" data-creatives--set-plan-modal-target="modal" data-action="click->creatives--set-plan-modal#backdrop" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;align-items:center;justify-content:center;">
+<div id="set-plan-modal" data-creatives--set-plan-modal-target="modal" data-action="click->creatives--set-plan-modal#backdrop" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10000;align-items:center;justify-content:center;">
   <div class="popup-box" style="min-width:320px;max-width:90vw;">
     <button id="close-set-plan-modal" class="popup-close-btn" data-action="creatives--set-plan-modal#close">&times;</button>
     <h2><%= t('collavre.creatives.index.set_plan_title', default: 'Set Plan for Selected Creatives') %></h2>

data/app/views/collavre/creatives/_share_button.html.erb

@@ -2,7 +2,7 @@
   <span aria-hidden="true"><%= svg_tag 'share.svg', class: 'icon-up', width: 22, height: 20 %></span>
 </button>
 <!-- Share Creative Modal -->
-<div id="share-creative-modal" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1100;align-items:center;justify-content:center;" data-creative-id="<%= (@parent_creative || @creative).id %>">
+<div id="share-creative-modal" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10000;align-items:center;justify-content:center;" data-creative-id="<%= (@parent_creative || @creative).id %>">
   <div class="popup-box" style="min-width:320px;max-width:90vw;">
     <button id="close-share-modal" class="popup-close-btn">&times;</button>
     <h2><%= t('collavre.creatives.index.share_creative') %></h2>

data/app/views/collavre/creatives/index.html.erb

@@ -197,7 +197,7 @@
       }
     ) %>
 
-<%= render 'collavre/comments/comments_popup' %>
+<%= render 'collavre/comments/comments_popup', auto_fullscreen: @auto_fullscreen %>
 <%= render 'inline_edit_form' %>
 
 <%= render 'set_plan_modal' %>

data/lib/collavre/version.rb

@@ -1,3 +1,3 @@
 module Collavre
-  VERSION = "0.2.3"
+  VERSION = "0.2.4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: collavre
 version: !ruby/object:Gem::Version
-  version: 0.2.3
+  version: 0.2.4
 platform: ruby
 authors:
 - Collavre
@@ -391,7 +391,6 @@ files:
 - app/views/collavre/comments/_presence_avatars.html.erb
 - app/views/collavre/comments/_reaction_picker.html.erb
 - app/views/collavre/comments/_read_receipts.html.erb
-- app/views/collavre/comments/fullscreen.html.erb
 - app/views/collavre/creatives/_add_button.html.erb
 - app/views/collavre/creatives/_delete_button.html.erb
 - app/views/collavre/creatives/_github_integration_modal.html.erb
@@ -449,7 +448,6 @@ files:
 - app/views/collavre/users/passkeys.html.erb
 - app/views/collavre/users/show.html.erb
 - app/views/inbox/badge_component/_count.html.erb
-- app/views/layouts/collavre/chat.html.erb
 - app/views/layouts/collavre/slide.html.erb
 - config/locales/ai_agent.en.yml
 - config/locales/ai_agent.ko.yml

data/app/views/collavre/comments/fullscreen.html.erb

@@ -1,5 +0,0 @@
-<% content_for :title, "#{@creative_snippet} - #{t('collavre.comments.comments')}" %>
-
-<div class="comments-fullscreen-page">
-  <%= render "collavre/comments/comments_popup", fullscreen: true, creative: @creative %>
-</div>

data/app/views/layouts/collavre/chat.html.erb

@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title><%= content_for(:title) || t('app.name') %></title>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="mobile-web-app-capable" content="yes">
-    <meta name="app-version" content="<%= Rails.application.config.app_version %>">
-    <%= csrf_meta_tags %>
-    <%= csp_meta_tag %>
-
-    <%= yield :head %>
-
-    <link rel="icon" href="/icon-1e3cf549d2.png" type="image/png">
-    <link rel="icon" href="/icon-1e3cf549d2.svg" type="image/svg+xml">
-    <link rel="apple-touch-icon" href="/icon-1e3cf549d2.png">
-
-    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
-    <%= stylesheet_link_tag "collavre/creatives" %>
-    <%= stylesheet_link_tag "collavre/actiontext" %>
-    <%= stylesheet_link_tag "collavre/dark_mode" %>
-    <%= stylesheet_link_tag "collavre/popup" %>
-    <%= stylesheet_link_tag "collavre/comments_popup" %>
-
-    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true, type: "module" %>
-
-    <% if Current.user&.theme.present? && !%w[light dark].include?(Current.user.theme) %>
-      <% if (custom_theme = UserTheme.find_by(id: Current.user.theme)) %>
-        <style id="user-theme-styles" data-turbo-track="reload">
-          body {
-            <% custom_theme.variables.each do |key, value| %>
-              <%= key %>: <%= value %> !important;
-            <% end %>
-          }
-        </style>
-      <% end %>
-    <% end %>
-  </head>
-  <body class="chat-fullscreen<%= ' dark-mode' if Current.user&.theme == 'dark' %><%= ' light-mode' if Current.user&.theme == 'light' %>" data-current-user-id="<%= Current.user&.id %>" data-controller="action-text-attachment-link" data-action="click->action-text-attachment-link#download">
-    <main>
-      <%= yield %>
-    </main>
-
-    <%= render "collavre/comments/reaction_picker" %>
-  </body>
-</html>