collavre 0.22.0 → 0.23.0

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

@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus'
-import { renderCreativeTree, dispatchCreativeTreeUpdated } from '../../creatives/tree_renderer'
+import { renderCreativeTree, appendCreativeNodes, dispatchCreativeTreeUpdated } from '../../creatives/tree_renderer'
 import { parseEmojis } from '../../utils/emoji_parser'
 
 const TREE_RETRY_DELAYS_MS = [200, 600]
@@ -14,6 +14,12 @@ export default class extends Controller {
     this.abortController = null
     this.loadingIndicator = null
     this._editing = false
+    this._pagination = null
+    this._sentinel = null
+    this._sentinelObserver = null
+    this._loadingMore = false
+    this._loadMoreAbort = null
+    this._loadMoreIndicator = null
     this.handleResize = this.updateAlignmentOffset.bind(this)
     this.handleTreeUpdated = () => this.queueAlignmentUpdate()
     this._handleEditStart = () => { this._editing = true }
@@ -60,6 +66,7 @@ export default class extends Controller {
     document.removeEventListener('creative-editing:start', this._handleEditStart)
     document.removeEventListener('creative-editing:stop', this._handleEditStop)
     document.removeEventListener('creative-sync:refetch', this._handleSyncRefetch)
+    this._teardownPagination()
     if (this._debouncedLoadTimer) clearTimeout(this._debouncedLoadTimer)
     if (this._archiveToggleHandler) {
       document.getElementById('toggle-archived-btn')?.removeEventListener('click', this._archiveToggleHandler)
@@ -140,6 +147,11 @@ export default class extends Controller {
   load() {
     if (!this.hasUrlValue) return
 
+    // A fresh load replaces the whole list (filter change, archive toggle, sync
+    // refetch), so any active load-more session is stale — tear it down before
+    // re-rendering page 1.
+    this._teardownPagination()
+
     if (this.abortController) {
       this.abortController.abort()
     }
@@ -196,6 +208,135 @@ export default class extends Controller {
     this.markContentLoaded()
     dispatchCreativeTreeUpdated(this.element)
     this.queueAlignmentUpdate()
+    this._setupPagination(data?.pagination)
+  }
+
+  // --- Load-more (paginated "Chats" feed) -------------------------------------
+  // Only engaged when the JSON response carries a `pagination` object (the
+  // comment filter). For the tree and search views the payload has no
+  // pagination, so none of this runs and behavior is unchanged.
+
+  _setupPagination(pagination) {
+    this._teardownPagination()
+    this._pagination = pagination || null
+    if (!this._pagination || !this._pagination.has_more) return
+    if (typeof IntersectionObserver === 'undefined') return
+    this._createSentinel()
+  }
+
+  _createSentinel() {
+    const sentinel = document.createElement('div')
+    sentinel.className = 'creative-chats-load-sentinel'
+    sentinel.setAttribute('aria-hidden', 'true')
+    this.element.appendChild(sentinel)
+    this._sentinel = sentinel
+    this._sentinelObserver = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) this._loadMore()
+    }, { root: null, rootMargin: '300px' })
+    this._sentinelObserver.observe(sentinel)
+  }
+
+  _loadMore() {
+    if (this._loadingMore) return
+    const nextPage = this._pagination && this._pagination.next_page
+    if (!nextPage) return
+
+    this._loadingMore = true
+    this._showLoadMoreIndicator()
+
+    // Tie this request to an AbortController so a fresh load() / teardown (filter
+    // change, archive toggle, sync refetch, disconnect) cancels an in-flight
+    // page fetch. Without this the stale promise could append rows for a
+    // different urlValue into the freshly rendered list and resurrect the
+    // pagination state via _repositionSentinel().
+    if (this._loadMoreAbort) this._loadMoreAbort.abort()
+    this._loadMoreAbort = new AbortController()
+    const signal = this._loadMoreAbort.signal
+
+    const url = new URL(this.urlValue, window.location.origin)
+    url.searchParams.set('page', String(nextPage))
+
+    fetch(url.pathname + url.search, { headers: { Accept: 'application/json' }, signal })
+      .then((response) => {
+        if (!response.ok) throw new Error(`Failed to load more chats: ${response.status}`)
+        return response.json()
+      })
+      .then((data) => {
+        if (signal.aborted) return
+        this._hideLoadMoreIndicator()
+        const nodes = Array.isArray(data?.creatives) ? data.creatives : []
+        if (nodes.length > 0) {
+          appendCreativeNodes(this.element, nodes)
+          dispatchCreativeTreeUpdated(this.element)
+          this.queueAlignmentUpdate()
+        }
+        this._loadingMore = false
+        this._pagination = data?.pagination || null
+        if (this._pagination && this._pagination.has_more) {
+          this._repositionSentinel()
+        } else {
+          this._teardownPagination()
+        }
+      })
+      .catch((error) => {
+        if (error.name === 'AbortError') return
+        console.error(error)
+        this._hideLoadMoreIndicator()
+        this._loadingMore = false
+        // Leave the sentinel in place so a later scroll can retry the page.
+      })
+  }
+
+  _repositionSentinel() {
+    // New rows were appended after the sentinel; move it back to the tail so it
+    // keeps trailing the list and can trigger the following page.
+    if (this._sentinel && this._sentinel.parentNode === this.element) {
+      this.element.appendChild(this._sentinel)
+    } else {
+      this._createSentinel()
+    }
+  }
+
+  _teardownPagination() {
+    if (this._loadMoreAbort) {
+      this._loadMoreAbort.abort()
+      this._loadMoreAbort = null
+    }
+    if (this._sentinelObserver) {
+      this._sentinelObserver.disconnect()
+      this._sentinelObserver = null
+    }
+    if (this._sentinel && this._sentinel.parentNode) {
+      this._sentinel.remove()
+    }
+    this._sentinel = null
+    this._pagination = null
+    this._loadingMore = false
+    this._hideLoadMoreIndicator()
+  }
+
+  _showLoadMoreIndicator() {
+    if (this._loadMoreIndicator) return
+    const indicator = document.createElement('div')
+    indicator.className = 'creative-tree-loading-placeholder creative-chats-load-more'
+    indicator.setAttribute('role', 'status')
+    indicator.setAttribute('aria-live', 'polite')
+    indicator.innerHTML = `
+      <span class="creative-loading-indicator" aria-hidden="true">
+        <span class="creative-loading-dot">.</span>
+        <span class="creative-loading-dot">.</span>
+        <span class="creative-loading-dot">.</span>
+      </span>
+    `
+    this.element.appendChild(indicator)
+    this._loadMoreIndicator = indicator
+  }
+
+  _hideLoadMoreIndicator() {
+    if (this._loadMoreIndicator && this._loadMoreIndicator.parentNode) {
+      this._loadMoreIndicator.remove()
+    }
+    this._loadMoreIndicator = null
   }
 
   showEmptyState() {

data/app/javascript/controllers/image_lightbox_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
+import { confirmDialog } from "../lib/utils/dialog"
 
 // Connects to data-controller="image-lightbox"
 // Provides a fullscreen image carousel with navigation, download, and zoom
@@ -338,7 +339,7 @@ export default class extends Controller {
 
   async _deleteCurrentImage() {
     if (!this.hasDownloadAllUrlValue) return
-    if (!confirm(this.i18nDeleteConfirmValue)) return
+    if (!(await confirmDialog(this.i18nDeleteConfirmValue, { danger: true }))) return
 
     const url = `${this.downloadAllUrlValue.replace("download_images", "remove_image")}?index=${this._currentIndex}`
     const csrfToken = document.querySelector("meta[name='csrf-token']")?.content

data/app/javascript/controllers/inbox_badge_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from '@hotwired/stimulus'
+import { Turbo } from '@hotwired/turbo-rails'
+import { createSubscription } from '../services/cable'
+
+// Keeps the global inbox badge live across WebSocket gaps.
+//
+// Steady-state, the badge is updated by Turbo Stream broadcasts on the
+// `["inbox", user]` stream (see Comment::Broadcastable). Those broadcasts are
+// fire-and-forget: ActionCable never replays a message missed while the socket
+// was down, so a badge update sent during a Turbo navigation gap, sleep/wake,
+// network blip, or server restart was lost until the next full page render
+// (the "badge only appears after refresh" bug).
+//
+// Subscribing to InboxBadgeChannel closes that gap: ActionCable re-runs the
+// channel's #subscribed on every (re)connect, and the server transmits the
+// authoritative badge snapshot straight back over THIS subscription. We render
+// it ourselves (rather than relying on the sibling turbo_stream_from stream,
+// which may not have re-attached yet) so the catch-up can't race a reconnect.
+export default class extends Controller {
+  connect() {
+    this.subscription = createSubscription(
+      { channel: 'Collavre::InboxBadgeChannel' },
+      { received: (snapshot) => Turbo.renderStreamMessage(snapshot) },
+    )
+  }
+
+  disconnect() {
+    if (this.subscription) {
+      this.subscription.unsubscribe()
+      this.subscription = null
+    }
+  }
+}

data/app/javascript/controllers/index.js

@@ -34,6 +34,7 @@ import ShareModalController from "./share_modal_controller"
 import ImageLightboxController from "./image_lightbox_controller"
 import SearchPopupController from "./search_popup_controller"
 import LandingVideoController from "./landing_video_controller"
+import InboxBadgeController from "./inbox_badge_controller"
 
 // Export all controllers
 export {
@@ -69,7 +70,8 @@ export {
   ImageLightboxController,
   SearchPopupController,
   CommentBadgeController,
-  LandingVideoController
+  LandingVideoController,
+  InboxBadgeController
 }
 
 // Registration function for use with a Stimulus application
@@ -108,4 +110,5 @@ export function registerControllers(application) {
   application.register("search-popup", SearchPopupController)
   application.register("comment-badge", CommentBadgeController)
   application.register("landing-video", LandingVideoController)
+  application.register("inbox-badge", InboxBadgeController)
 }

data/app/javascript/controllers/share_modal_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
+import { confirmDialog, alertDialog } from "../lib/utils/dialog"
 
 export default class extends Controller {
   static targets = ["container"]
@@ -277,13 +278,13 @@ export default class extends Controller {
       const methodInput = form.querySelector("input[name='_method'][value='delete']")
       if (!methodInput) return
 
-      form.addEventListener("submit", (e) => {
+      form.addEventListener("submit", async (e) => {
         e.preventDefault()
 
         const confirmMessage = form.dataset.turboConfirm
           || form.querySelector("button[type='submit']")?.dataset?.turboConfirm
           || form.querySelector("button")?.dataset?.confirm
-        if (confirmMessage && !window.confirm(confirmMessage)) return
+        if (confirmMessage && !(await confirmDialog(confirmMessage, { danger: true }))) return
 
         const listItem = form.closest("li")
         if (listItem) {
@@ -379,7 +380,7 @@ export default class extends Controller {
       const copiedTemplate = inviteLinkBtn.dataset.copiedTemplate
 
       if (permission === "no_access") {
-        alert(noAccessMessage)
+        alertDialog(noAccessMessage)
         return
       }
 

data/app/javascript/controllers/topic_search_controller.js

@@ -1,5 +1,6 @@
 import CommonPopupController from './common_popup_controller'
 import { fetchNextTopicName, createTopicWithComments } from '../lib/api/topics'
+import { alertDialog } from '../lib/utils/dialog'
 
 export default class extends CommonPopupController {
     static targets = ['input', 'list', 'close']
@@ -148,7 +149,7 @@ export default class extends CommonPopupController {
                 this.onSelectCallback({ id: result.topic.id, label: `#${result.topic.name}`, created: true })
             }
         } else {
-            alert(result.error)
+            alertDialog(result.error)
         }
     }
 

data/app/javascript/creatives/drag_drop/event_handlers.js

@@ -26,6 +26,8 @@ import {
 import { createMoveContext, applyMove, revertMove } from './operations';
 import { sendNewOrder, sendLinkedCreative, sendTopicMove } from '../../lib/api/drag_drop';
 import { initIndicator, showLinkHover, hideLinkHover } from './indicator';
+import { showMissingMembersPopup } from '../topic_move_members_popup';
+import { alertDialog } from '../../lib/utils/dialog';
 
 const childZoneRatio = 0.3;
 const coordPrecision = 5;
@@ -500,9 +502,7 @@ function getDraggedContext(event) {
 
 function notifyInvalidDrop() {
   console.error('Rejected invalid creative drop payload');
-  if (typeof window !== 'undefined' && typeof window.alert === 'function') {
-    window.alert(INVALID_DROP_MESSAGE);
-  }
+  alertDialog(INVALID_DROP_MESSAGE);
 }
 
 import { attachBundleDragImage } from '../../utils/drag_bundle_image.js';
@@ -640,15 +640,24 @@ export function handleDrop(event) {
       if (sourceCreativeId === targetCreativeId) return;
 
       sendTopicMove({ topicId, sourceCreativeId, targetCreativeId })
-        .then(() => {
+        .then((data) => {
           // Dispatch event so topic list refreshes
           window.dispatchEvent(new CustomEvent('collavre:topic-moved', {
             detail: { topicId, sourceCreativeId, targetCreativeId }
           }));
+
+          // Offer to re-add members who lose access at the new location.
+          if (data && Array.isArray(data.missing_members) && data.missing_members.length > 0) {
+            showMissingMembersPopup({
+              members: data.missing_members,
+              targetCreativeId: data.target_creative_id || targetCreativeId,
+              targetCreativeName: data.target_creative_name,
+            });
+          }
         })
         .catch((error) => {
           console.error('Failed to move topic', error);
-          alert(error.message || 'Failed to move topic');
+          alertDialog(error.message || 'Failed to move topic');
         });
     } catch (error) {
       console.error('Failed to parse topic move data', error);

data/app/javascript/creatives/topic_move_members_popup.js

@@ -0,0 +1,156 @@
+import csrfFetch from '../lib/api/csrf_fetch';
+
+// After a topic is moved to another creative, TopicsController#move returns the
+// members who had access on the source creative but not on the target. This
+// module renders the (hidden) `#topic-move-members-modal` partial with those
+// members and lets the user re-add them with one click. All user-facing text
+// comes from the partial's i18n data-attributes — nothing is hardcoded here.
+
+function getModal() {
+  return document.getElementById('topic-move-members-modal');
+}
+
+function closeModal(modal) {
+  modal.style.display = 'none';
+  document.body.classList.remove('no-scroll');
+  const list = modal.querySelector('#topic-move-members-list');
+  if (list) list.innerHTML = '';
+  const message = modal.querySelector('#topic-move-members-message');
+  if (message) message.innerHTML = '';
+}
+
+function buildRow(modal, member) {
+  const template = modal.querySelector('#topic-move-member-row');
+  const row = template.content.firstElementChild.cloneNode(true);
+  const user = member.user || {};
+
+  const avatar = row.querySelector('.tmm-avatar');
+  if (user.avatar_url && !user.default_avatar) {
+    const img = document.createElement('img');
+    img.src = user.avatar_url;
+    img.alt = '';
+    img.style.width = '100%';
+    img.style.height = '100%';
+    img.style.objectFit = 'cover';
+    avatar.appendChild(img);
+  } else {
+    avatar.textContent = user.initial || '?';
+  }
+
+  row.querySelector('.tmm-name').textContent = user.name || user.email || '';
+  row.querySelector('.tmm-email').textContent = user.email || '';
+
+  const select = row.querySelector('.tmm-permission');
+  if (member.permission) {
+    const option = Array.from(select.options).find((o) => o.value === member.permission);
+    if (option) select.value = member.permission;
+  }
+
+  row.dataset.userEmail = user.email || '';
+  return row;
+}
+
+function setMessage(modal, text) {
+  const message = modal.querySelector('#topic-move-members-message');
+  if (message) message.textContent = text || '';
+}
+
+async function addSelected(modal, targetCreativeId) {
+  const addBtn = modal.querySelector('#topic-move-members-add');
+  const rows = Array.from(modal.querySelectorAll('.topic-move-member-row')).filter((row) => {
+    const checkbox = row.querySelector('.tmm-checkbox');
+    return checkbox && checkbox.checked && row.dataset.userEmail;
+  });
+
+  if (rows.length === 0) {
+    closeModal(modal);
+    return;
+  }
+
+  addBtn.disabled = true;
+  setMessage(modal, addBtn.dataset.addingText || modal.dataset.addingText || '');
+
+  const urlTemplate = modal.dataset.sharesUrlTemplate || modal.dataset.sharesUrl;
+  const url = urlTemplate.replace('__CREATIVE_ID__', encodeURIComponent(targetCreativeId));
+
+  let added = 0;
+  let failed = 0;
+
+  // Sequential so we reuse the existing per-user share endpoint (with all its
+  // invitation / linked-creative / contact side effects) and keep ordering.
+  for (const row of rows) {
+    const status = row.querySelector('.tmm-status');
+    const select = row.querySelector('.tmm-permission');
+    const body = new FormData();
+    body.append('user_email', row.dataset.userEmail);
+    body.append('permission', select ? select.value : 'feedback');
+
+    try {
+      // eslint-disable-next-line no-await-in-loop
+      const response = await csrfFetch(url, {
+        method: 'POST',
+        headers: { Accept: 'application/json' },
+        body,
+      });
+      if (response.ok) {
+        added += 1;
+        if (status) status.textContent = '✓';
+        row.style.opacity = '0.6';
+      } else {
+        failed += 1;
+        if (status) status.textContent = '✗';
+      }
+    } catch (error) {
+      failed += 1;
+      if (status) status.textContent = '✗';
+    }
+  }
+
+  if (failed === 0) {
+    const template = added === 1
+      ? (modal.dataset.addedOne || '')
+      : (modal.dataset.addedOther || '');
+    setMessage(modal, template.replace('__COUNT__', added));
+    setTimeout(() => closeModal(modal), 1200);
+  } else if (added === 0) {
+    setMessage(modal, modal.dataset.failedText || '');
+    addBtn.disabled = false;
+  } else {
+    const template = modal.dataset.partialText || '';
+    setMessage(modal, template.replace('__ADDED__', added).replace('__FAILED__', failed));
+    addBtn.disabled = false;
+  }
+}
+
+export function showMissingMembersPopup({ members, targetCreativeId, targetCreativeName }) {
+  if (!Array.isArray(members) || members.length === 0) return;
+  const modal = getModal();
+  if (!modal) return;
+
+  const list = modal.querySelector('#topic-move-members-list');
+  list.innerHTML = '';
+  members.forEach((member) => list.appendChild(buildRow(modal, member)));
+
+  const description = modal.querySelector('#topic-move-members-description');
+  if (description) {
+    const template = modal.dataset.descriptionTemplate || '';
+    description.textContent = template.replace('__CREATIVE_NAME__', targetCreativeName || '');
+  }
+
+  setMessage(modal, '');
+  const addBtn = modal.querySelector('#topic-move-members-add');
+  addBtn.disabled = false;
+
+  // (Re)wire controls. Using onclick keeps a single handler across re-opens.
+  modal.querySelector('#topic-move-members-close').onclick = () => closeModal(modal);
+  modal.querySelector('#topic-move-members-skip').onclick = () => closeModal(modal);
+  modal.onclick = (event) => {
+    if (event.target === modal) closeModal(modal);
+  };
+  addBtn.onclick = () => addSelected(modal, targetCreativeId);
+
+  modal.style.display = 'flex';
+  modal.style.alignItems = 'center';
+  modal.style.justifyContent = 'center';
+  document.body.classList.add('no-scroll');
+}

data/app/javascript/creatives/tree_renderer.js

@@ -169,6 +169,9 @@ function applyRowProperties(row, node) {
   if (Object.prototype.hasOwnProperty.call(inlinePayload, 'markdown_source')) {
     setDatasetValue(row, 'markdownSource', inlinePayload.markdown_source ?? '')
   }
+  if (Object.prototype.hasOwnProperty.call(inlinePayload, 'markdown_editor')) {
+    setDatasetValue(row, 'markdownEditor', inlinePayload.markdown_editor ?? '')
+  }
 
   if (dirty && typeof row.requestUpdate === 'function') {
     // Before Lit re-renders, sync progressHtml from current DOM.
@@ -308,6 +311,14 @@ export function renderCreativeTree(container, nodes, { replace = true } = {}) {
   reconcileNodes(container, nodes)
 }
 
+// Append a page of flat nodes to an already-rendered list without clearing the
+// existing rows. Used by the "Chats" feed's load-more, where each page is added
+// below the previous one rather than replacing it.
+export function appendCreativeNodes(container, nodes) {
+  if (!container) return
+  appendNodes(container, nodes)
+}
+
 export function dispatchCreativeTreeUpdated(container) {
   if (!container) return
   const event = new CustomEvent('creative-tree:updated', { bubbles: true })

data/app/javascript/lib/__tests__/turbo_confirm.test.js

@@ -0,0 +1,81 @@
+/**
+ * @jest-environment jsdom
+ */
+import { jest } from '@jest/globals'
+
+// Mock the Turbo import so the module installs its confirm method onto a fake
+// config we control, instead of pulling in (and starting) the real Turbo.
+const fakeTurbo = { config: { forms: {} } }
+jest.unstable_mockModule('@hotwired/turbo-rails', () => ({ Turbo: fakeTurbo }))
+
+// Importing the module installs the override (side effect).
+await import('../turbo_confirm')
+
+const turboConfirm = fakeTurbo.config.forms.confirm
+const modal = () => document.querySelector('.modal-dialog')
+const message = () => document.querySelector('.confirm-dialog-message')
+
+afterEach(() => {
+  document.body.innerHTML = ''
+  document.documentElement.lang = ''
+})
+
+test('installs a confirm method on Turbo.config.forms', () => {
+  expect(typeof turboConfirm).toBe('function')
+})
+
+test('renders the in-app confirm dialog with the Turbo message', () => {
+  const form = document.createElement('form')
+  turboConfirm('Revoke this token?', form, null)
+  expect(modal()).not.toBeNull()
+  expect(message().textContent).toBe('Revoke this token?')
+  // Cancel button present (it is a confirm, not an alert).
+  expect(document.querySelector('.modal-dialog-btn-secondary')).not.toBeNull()
+})
+
+test('resolves true when confirmed, false when cancelled', async () => {
+  const form = document.createElement('form')
+
+  const okP = turboConfirm('ok?', form, null)
+  document.querySelector('.modal-dialog-btn-danger, .modal-dialog-btn-primary').click()
+  await expect(okP).resolves.toBe(true)
+
+  const cancelP = turboConfirm('no?', form, null)
+  document.querySelector('.modal-dialog-btn-secondary').click()
+  await expect(cancelP).resolves.toBe(false)
+})
+
+test('styles the confirm button as danger for delete submits', () => {
+  const form = document.createElement('form')
+  form.setAttribute('data-turbo-method', 'delete')
+  turboConfirm('Delete?', form, null)
+  expect(document.querySelector('.modal-dialog-btn-danger')).not.toBeNull()
+  expect(document.querySelector('.modal-dialog-btn-primary')).toBeNull()
+})
+
+test('detects delete via the submitter and the hidden _method input', () => {
+  // Submitter carries the method (button_to renders a button submitter).
+  const form1 = document.createElement('form')
+  const submitter = document.createElement('button')
+  submitter.setAttribute('data-turbo-method', 'delete')
+  turboConfirm('x', form1, submitter)
+  expect(document.querySelector('.modal-dialog-btn-danger')).not.toBeNull()
+  document.body.innerHTML = ''
+
+  // Rails non-Turbo fallback: hidden _method=delete input.
+  const form2 = document.createElement('form')
+  const hidden = document.createElement('input')
+  hidden.name = '_method'
+  hidden.value = 'delete'
+  form2.appendChild(hidden)
+  turboConfirm('x', form2, null)
+  expect(document.querySelector('.modal-dialog-btn-danger')).not.toBeNull()
+})
+
+test('non-destructive submit uses the primary (non-danger) button', () => {
+  const form = document.createElement('form')
+  form.setAttribute('method', 'post')
+  turboConfirm('Proceed?', form, null)
+  expect(document.querySelector('.modal-dialog-btn-primary')).not.toBeNull()
+  expect(document.querySelector('.modal-dialog-btn-danger')).toBeNull()
+})