collavre 0.24.0 → 0.25.0

data/app/javascript/controllers/last_visited_creative_controller.js

@@ -0,0 +1,58 @@
+import { Controller } from '@hotwired/stimulus'
+import {
+  cancelPendingLastVisitedCreative,
+  prepareLastVisitedCreativeNavigation,
+  rememberLastVisitedCreative,
+} from '../lib/last_visited_creative'
+
+// A Turbo restore can replace the entire body, so preserve the visit action
+// outside an individual controller instance until the restored page reconnects.
+let lastVisitAction = null
+
+export default class extends Controller {
+  static values = {
+    url: String,
+    creativeId: String,
+    visitToken: String,
+    visitSequence: Number,
+  }
+
+  connect() {
+    this.handleVisit = this.handleVisit.bind(this)
+    this.handleRender = this.handleRender.bind(this)
+    this.handleFetchRequest = this.handleFetchRequest.bind(this)
+    document.addEventListener('turbo:visit', this.handleVisit)
+    document.addEventListener('turbo:render', this.handleRender)
+    document.addEventListener('turbo:before-fetch-request', this.handleFetchRequest)
+
+    if (lastVisitAction === 'restore') {
+      requestAnimationFrame(() => this.rememberRestoredCreative())
+    }
+  }
+
+  disconnect() {
+    document.removeEventListener('turbo:visit', this.handleVisit)
+    document.removeEventListener('turbo:render', this.handleRender)
+    document.removeEventListener('turbo:before-fetch-request', this.handleFetchRequest)
+  }
+
+  handleVisit(event) {
+    cancelPendingLastVisitedCreative()
+    lastVisitAction = event.detail?.action
+  }
+
+  handleRender() {
+    requestAnimationFrame(() => this.rememberRestoredCreative())
+  }
+
+  handleFetchRequest(event) {
+    prepareLastVisitedCreativeNavigation(event, this.urlValue, this.visitTokenValue)
+  }
+
+  rememberRestoredCreative() {
+    if (lastVisitAction !== 'restore' || !this.element.isConnected) return
+
+    rememberLastVisitedCreative(this.urlValue, this.creativeIdValue, this.visitTokenValue)
+    lastVisitAction = null
+  }
+}

data/app/javascript/controllers/link_creative_controller.js

@@ -1,17 +1,11 @@
 import CommonPopupController from './common_popup_controller'
 import creativesApi from '../lib/api/creatives'
+import { CHEVRON_COLLAPSED, CHEVRON_EXPANDED } from '../utils/chevron_icons'
 
 // Minimum characters before a text search fires. Below this the popup shows the
 // browsable mini-tree instead (empty input => tree, >= MIN_QUERY chars => search).
 const MIN_QUERY = 2
 
-// Chevron icons matched to the main creative tree (creative_tree_row.js#_toggleIcon)
-// so the mini-tree expand/collapse affordance is visually identical.
-const CHEVRON_COLLAPSED =
-    '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6L15 12L9 18"/></svg>'
-const CHEVRON_EXPANDED =
-    '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9L12 15L18 9"/></svg>'
-
 export default class extends CommonPopupController {
     static targets = ['input', 'list', 'close']
 
@@ -19,6 +13,7 @@ export default class extends CommonPopupController {
         super.connect()
         this._debounceTimer = null
         this._searchToken = 0
+        this._openGeneration = 0
         this._mode = 'tree'
         this._rootNodes = null
         this._activeEl = null
@@ -39,16 +34,19 @@ export default class extends CommonPopupController {
         super.disconnect()
     }
 
-    open(anchorRect, onSelectCallback, onCloseCallback) {
+    open(anchor, onSelectCallback, onCloseCallback, { allowCreate = false } = {}) {
+        this._openGeneration++
         this.onSelectCallback = onSelectCallback
         this.onCloseCallback = onCloseCallback
+        this._allowCreate = allowCreate
+        this._creating = false
         this._mode = 'tree'
         this._rootNodes = null
         this._activeEl = null
         this.inputTarget.value = ''
         // Clear any CommonPopup item state; we render our own DOM into the list.
         this.popup.setItems([])
-        super.open(anchorRect)
+        super.open(anchor)
 
         requestAnimationFrame(() => {
             this.inputTarget.focus()
@@ -58,6 +56,7 @@ export default class extends CommonPopupController {
     }
 
     close() {
+        this._openGeneration++
         this._clearDebounce()
         super.close()
     }
@@ -180,6 +179,16 @@ export default class extends CommonPopupController {
         }
         nodes.forEach((node) => this.listTarget.appendChild(this._buildTreeItem(node, 0)))
         this._resetActive()
+        this._reposition()
+    }
+
+    // The popup is positioned one frame after open(), while the list still shows
+    // "Loading…". Every render that changes the list's height has to re-run that
+    // placement, or the popup keeps the size the placeholder implied — which,
+    // with the caret near the bottom of the screen, leaves a single tree row
+    // visible under the search box.
+    _reposition() {
+        this.popup?.reposition()
     }
 
     _buildTreeItem(node, level) {
@@ -255,6 +264,7 @@ export default class extends CommonPopupController {
         if (childrenUl) childrenUl.hidden = true
         const toggle = li.querySelector(':scope > .link-tree-row > .link-tree-toggle')
         if (toggle && !toggle.classList.contains('link-tree-toggle-empty')) toggle.innerHTML = CHEVRON_COLLAPSED
+        this._reposition()
     }
 
     // Returns a promise that resolves once the node is expanded (children loaded
@@ -269,7 +279,10 @@ export default class extends CommonPopupController {
         childrenUl.hidden = false
         if (toggle && !toggle.classList.contains('link-tree-toggle-empty')) toggle.innerHTML = CHEVRON_EXPANDED
 
-        if (li.dataset.loaded === '1') return Promise.resolve()
+        if (li.dataset.loaded === '1') {
+            this._reposition()
+            return Promise.resolve()
+        }
 
         const level = parseInt(li.dataset.level, 10) + 1
         li.dataset.loaded = '1'
@@ -281,13 +294,15 @@ export default class extends CommonPopupController {
                 const list = Array.isArray(nodes) ? nodes : []
                 if (list.length === 0) {
                     childrenUl.innerHTML = `<li class="link-tree-empty">${this._escape(this._text('emptyText'))}</li>`
-                    return
+                } else {
+                    list.forEach((child) => childrenUl.appendChild(this._buildTreeItem(child, level)))
                 }
-                list.forEach((child) => childrenUl.appendChild(this._buildTreeItem(child, level)))
+                this._reposition()
             })
             .catch(() => {
                 li.dataset.loaded = '0'
                 childrenUl.innerHTML = ''
+                this._reposition()
             })
     }
 
@@ -295,12 +310,11 @@ export default class extends CommonPopupController {
 
     _renderSearchResults(results) {
         this.listTarget.innerHTML = ''
-        if (!results || results.length === 0) {
-            this._renderMessage(this._text('noResultsText'))
-            return
-        }
+        const query = this.inputTarget.value.trim()
+        const list = Array.isArray(results) ? results : []
+        if (list.length === 0) this._appendMessage(this._text('noResultsText'))
 
-        results.forEach((result) => {
+        list.forEach((result) => {
             const li = document.createElement('li')
             li.className = 'link-result-item'
             li.setAttribute('data-pick-row', '')
@@ -321,7 +335,33 @@ export default class extends CommonPopupController {
 
             this.listTarget.appendChild(li)
         })
+
+        const exactMatch = list.some((result) =>
+            String(result.description || '').trim().toLocaleLowerCase() === query.toLocaleLowerCase()
+        )
+        if (this._allowCreate && query && !exactMatch) {
+            this.listTarget.appendChild(this._buildCreateItem(query))
+        }
         this._resetActive()
+        this._reposition()
+    }
+
+    _buildCreateItem(query) {
+        const li = document.createElement('li')
+        li.className = 'link-result-item link-create-item'
+        li.setAttribute('data-pick-row', '')
+        li.dataset.create = 'true'
+        li.dataset.query = query
+
+        const label = document.createElement('div')
+        label.className = 'link-result-label'
+        label.textContent = this._text('createText').replace('%{query}', query)
+        li.appendChild(label)
+
+        li.addEventListener('mouseenter', () => this._setActive(li))
+        li.addEventListener('mousedown', (event) => event.preventDefault())
+        li.addEventListener('click', () => this._activateRow(li))
+        return li
     }
 
     _buildBreadcrumb(result) {
@@ -446,6 +486,10 @@ export default class extends CommonPopupController {
 
     _activateRow(row) {
         if (!row || !row.hasAttribute('data-pick-row')) return
+        if (row.dataset.create === 'true') {
+            this._createCreative(row.dataset.query)
+            return
+        }
         // For a linked-creative shell row, emit the effective origin id, not the
         // shell id: consumers use the selected id as the new link's origin, and
         // linking to the shell (rather than the real shared creative) would make
@@ -458,6 +502,25 @@ export default class extends CommonPopupController {
         this.select({ id, label })
     }
 
+    _createCreative(query) {
+        if (this._creating || !query) return
+        this._creating = true
+        const openGeneration = this._openGeneration
+        this._renderMessage(this._text('creatingText'))
+
+        creativesApi.createFromTitle(query)
+            .then((creative) => {
+                if (openGeneration !== this._openGeneration) return
+                if (!creative?.id) throw new Error('Creative creation returned no id')
+                this.select({ id: creative.id, label: query })
+            })
+            .catch(() => {
+                if (openGeneration !== this._openGeneration) return
+                this._creating = false
+                this._renderMessage(this._text('createFailedText'))
+            })
+    }
+
     // Override select to invoke callback
     select(item) {
         if (this.onSelectCallback) {
@@ -500,11 +563,16 @@ export default class extends CommonPopupController {
 
     _renderMessage(text) {
         this.listTarget.innerHTML = ''
+        this._appendMessage(text)
+        this._activeEl = null
+        this._reposition()
+    }
+
+    _appendMessage(text) {
         const li = document.createElement('li')
         li.className = 'link-popup-message'
         li.textContent = text
         this.listTarget.appendChild(li)
-        this._activeEl = null
     }
 
     _text(key) {
@@ -513,6 +581,9 @@ export default class extends CommonPopupController {
             noResultsText: this.element.dataset.linkCreativeNoResultsText,
             emptyText: this.element.dataset.linkCreativeEmptyText,
             expandText: this.element.dataset.linkCreativeExpandText,
+            createText: this.element.dataset.linkCreativeCreateText,
+            creatingText: this.element.dataset.linkCreativeCreatingText,
+            createFailedText: this.element.dataset.linkCreativeCreateFailedText,
         }
         return map[key] || ''
     }

data/app/javascript/controllers/progress_filter_controller.js

@@ -1,35 +1,25 @@
 import { Controller } from '@hotwired/stimulus'
+import {
+  applyFilterParam,
+  buildFilterUrl,
+  syncFilterButtons,
+  visitFilterUrl
+} from '../lib/utils/filter_navigation'
 
 export default class extends Controller {
   static targets = ['button']
+  static values = { indexPath: String, onIndex: Boolean }
 
   apply(event) {
     event.preventDefault()
     const filter = event.params.filter ?? event.currentTarget.dataset.filter
     if (!filter) return
 
-    const url = new URL(window.location.href)
+    const url = buildFilterUrl(
+      { indexPath: this.indexPathValue, onIndex: this.onIndexValue },
+      (params) => applyFilterParam(params, filter)
+    )
 
-    if (filter === 'comment') {
-      if (url.searchParams.get('comment') === 'true') {
-        url.searchParams.delete('comment')
-      } else {
-        url.searchParams.set('comment', 'true')
-      }
-    } else {
-      url.searchParams.delete('min_progress')
-      url.searchParams.delete('max_progress')
-
-      if (filter === 'complete') {
-        url.searchParams.set('min_progress', '1')
-        url.searchParams.set('max_progress', '1')
-      } else if (filter === 'incomplete') {
-        url.searchParams.set('min_progress', '0')
-        url.searchParams.set('max_progress', '0.99')
-      }
-    }
-
-    const query = url.searchParams.toString()
-    window.location.href = query ? `${url.pathname}?${query}` : url.pathname
+    if (visitFilterUrl(url)) syncFilterButtons(url)
   }
 }

data/app/javascript/controllers/search_popup_controller.js

@@ -1,7 +1,15 @@
 import { Controller } from '@hotwired/stimulus'
+import {
+  WORKSPACE_FRAME_ID,
+  applyFilterParam,
+  buildFilterUrl,
+  syncFilterButtons,
+  visitFilterUrl
+} from '../lib/utils/filter_navigation'
 
 export default class extends Controller {
   static targets = ['input', 'popup', 'overlay']
+  static values = { indexPath: String, onIndex: Boolean }
 
   connect() {
     this._escHandler = (e) => {
@@ -22,6 +30,18 @@ export default class extends Controller {
       }
     }
     document.addEventListener('keydown', this._shortcutHandler)
+
+    // The GNB survives workspace-frame visits. Tree navigation and frame
+    // history traversal bypass _navigate(), so keep its controls aligned with
+    // the browser URL whenever that frame loads or history changes.
+    this._frameLoadHandler = (event) => {
+      if (event.target.id !== WORKSPACE_FRAME_ID) return
+      this._syncFromLocation()
+    }
+    this._historyHandler = () => this._syncFromLocation()
+    document.addEventListener('turbo:frame-load', this._frameLoadHandler)
+    window.addEventListener('popstate', this._historyHandler)
+    this._syncFromLocation()
   }
 
   _isEditableTarget(target) {
@@ -38,6 +58,8 @@ export default class extends Controller {
   disconnect() {
     document.removeEventListener('keydown', this._escHandler)
     document.removeEventListener('keydown', this._shortcutHandler)
+    document.removeEventListener('turbo:frame-load', this._frameLoadHandler)
+    window.removeEventListener('popstate', this._historyHandler)
   }
 
   open() {
@@ -81,33 +103,13 @@ export default class extends Controller {
     const filter = event.currentTarget.dataset.filter
     if (!filter) return
 
-    const url = new URL(window.location.href)
-    url.searchParams.delete('min_progress')
-    url.searchParams.delete('max_progress')
-
-    if (filter === 'complete') {
-      url.searchParams.set('min_progress', '1')
-      url.searchParams.set('max_progress', '1')
-    } else if (filter === 'incomplete') {
-      url.searchParams.set('min_progress', '0')
-      url.searchParams.set('max_progress', '0.99')
-    }
-
-    const query = url.searchParams.toString()
-    window.location.href = query ? `${url.pathname}?${query}` : url.pathname
+    this._navigate((params) => applyFilterParam(params, filter))
   }
 
   // Apply comment filter
   applyCommentFilter(event) {
     event.preventDefault()
-    const url = new URL(window.location.href)
-    if (url.searchParams.get('comment') === 'true') {
-      url.searchParams.delete('comment')
-    } else {
-      url.searchParams.set('comment', 'true')
-    }
-    const query = url.searchParams.toString()
-    window.location.href = query ? `${url.pathname}?${query}` : url.pathname
+    this._navigate((params) => applyFilterParam(params, 'comment'))
   }
 
   // Toggle search mode (flat/tree)
@@ -116,39 +118,55 @@ export default class extends Controller {
     const mode = event.currentTarget.dataset.mode
     if (!mode) return
 
-    const url = new URL(window.location.href)
-    if (mode === 'tree') {
-      url.searchParams.set('search_mode', 'tree')
-    } else {
-      url.searchParams.delete('search_mode')
-    }
-    const query = url.searchParams.toString()
-    window.location.href = query ? `${url.pathname}?${query}` : url.pathname
+    this._navigate((params) => {
+      if (mode === 'tree') {
+        params.set('search_mode', 'tree')
+      } else {
+        params.delete('search_mode')
+      }
+    })
   }
 
   // Toggle archive visibility via URL parameter
   toggleArchive(event) {
     event.preventDefault()
-    const url = new URL(window.location.href)
-    if (url.searchParams.get('show_archived') === 'true') {
-      url.searchParams.delete('show_archived')
-    } else {
-      url.searchParams.set('show_archived', 'true')
-    }
-    const query = url.searchParams.toString()
-    window.location.href = query ? `${url.pathname}?${query}` : url.pathname
+    this._navigate((params) => {
+      if (params.get('show_archived') === 'true') {
+        params.delete('show_archived')
+      } else {
+        params.set('show_archived', 'true')
+      }
+    })
   }
 
   _applyFilters(overrides = {}) {
-    const url = new URL(window.location.href)
-    if ('search' in overrides) {
-      if (overrides.search) {
-        url.searchParams.set('search', overrides.search)
+    this._navigate((params) => {
+      if (!('search' in overrides)) return
+
+      const search = overrides.search
+      if (search.trim()) {
+        params.set('search', search)
       } else {
-        url.searchParams.delete('search')
+        params.delete('search')
       }
-    }
-    const query = url.searchParams.toString()
-    window.location.href = query ? `${url.pathname}?${query}` : url.pathname
+    })
+  }
+
+  // The popup lives in the GNB, outside the workspace frame, so a frame-only
+  // navigation leaves it open and showing the previous filter state.
+  _navigate(mutate) {
+    const url = buildFilterUrl(
+      { indexPath: this.indexPathValue, onIndex: this.onIndexValue },
+      mutate
+    )
+
+    this.close()
+    if (visitFilterUrl(url)) syncFilterButtons(url)
+  }
+
+  _syncFromLocation() {
+    const url = new URL(window.location.href)
+    syncFilterButtons(url)
+    this.inputTarget.value = url.searchParams.get('search') || ''
   }
 }

data/app/javascript/controllers/share_user_search_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus'
-import CommonPopup from '../lib/common_popup'
+import CommonPopup, { elementAnchor } from '../lib/common_popup'
 
 export default class extends Controller {
     static targets = ['input']
@@ -78,7 +78,7 @@ export default class extends Controller {
 
             if (items.length > 0) {
                 this.popup?.setItems(items)
-                this.popup?.showAt(this.inputTarget.getBoundingClientRect())
+                this.popup?.showAt(elementAnchor(this.inputTarget))
             } else {
                 this.popup?.hide()
             }

data/app/javascript/controllers/topic_list_controller.js

@@ -25,21 +25,55 @@ export default class extends CommonPopupController {
 
     openForTopics({ topics = [], archivedTopics = [], mainTopicId = null, allMessagesLabel = 'All Messages' }, anchorRect, onSelectCallback, boundsElement = null) {
         this.onSelectCallback = onSelectCallback
-        this._allItems = this._buildItems({ topics, archivedTopics, mainTopicId, allMessagesLabel })
         this.inputTarget.value = ''
-        this.setItems(this._allItems)
+        this.updateTopics({ topics, archivedTopics, mainTopicId, allMessagesLabel })
         super.open(anchorRect, boundsElement)
+        if (this.isMobile()) {
+            // Autofocusing the search box raises the virtual keyboard, which covers
+            // the very list the user just asked to see. Drop focus instead — tapping
+            // the box still opens the keyboard when the user actually wants to search.
+            this._blurActiveElement()
+            return
+        }
         requestAnimationFrame(() => this.inputTarget.focus())
     }
 
+    updateTopics({ topics = [], archivedTopics = [], mainTopicId = null, allMessagesLabel = 'All Messages' }) {
+        const activeItem = this.popup.items[this.popup.activeIndex]
+        this._allItems = this._buildItems({ topics, archivedTopics, mainTopicId, allMessagesLabel })
+        this._onInput()
+        if (!activeItem) return
+
+        const activeIndex = this.popup.items.findIndex(item => String(item.id) === String(activeItem.id))
+        if (activeIndex >= 0) this.popup.setActiveIndex(activeIndex)
+    }
+
+    isMobile() {
+        return window.innerWidth <= 600
+    }
+
+    _blurActiveElement() {
+        const active = document.activeElement
+        if (active && active !== document.body && typeof active.blur === 'function') active.blur()
+    }
+
     _buildItems({ topics, archivedTopics, mainTopicId, allMessagesLabel }) {
         const main = mainTopicId ? topics.find(t => String(t.id) === String(mainTopicId)) : null
         const others = topics.filter(t => !main || String(t.id) !== String(mainTopicId))
+        const topicItem = (topic, archived) => {
+            const unreadCount = Number(topic.unread_count)
+            return {
+                id: topic.id,
+                label: `#${topic.name}`,
+                archived,
+                unreadCount: Number.isFinite(unreadCount) ? unreadCount : 0
+            }
+        }
         const items = []
-        if (main) items.push({ id: main.id, label: `#${main.name}`, archived: false })
-        others.forEach(t => items.push({ id: t.id, label: `#${t.name}`, archived: false }))
+        if (main) items.push(topicItem(main, false))
+        others.forEach(t => items.push(topicItem(t, false)))
         items.push({ id: '', label: `📋 ${allMessagesLabel}`, archived: false })
-        archivedTopics.forEach(t => items.push({ id: t.id, label: `#${t.name}`, archived: true }))
+        archivedTopics.forEach(t => items.push(topicItem(t, true)))
         return items
     }
 
@@ -65,10 +99,13 @@ export default class extends CommonPopupController {
             .replace(/&/g, '&amp;')
             .replace(/</g, '&lt;')
             .replace(/>/g, '&gt;')
+        const unreadBadge = item.unreadCount > 0
+            ? `<span class="topic-unread-badge">${item.unreadCount}</span>`
+            : ''
         if (item.archived) {
-            return `<span class="topic-list-item topic-list-item--archived">${ICON_ARCHIVE} ${escaped}</span>`
+            return `<span class="topic-list-item topic-list-item--archived">${ICON_ARCHIVE}<span class="topic-list-item-label">${escaped}</span>${unreadBadge}</span>`
         }
-        return `<span class="topic-list-item">${escaped}</span>`
+        return `<span class="topic-list-item"><span class="topic-list-item-label">${escaped}</span>${unreadBadge}</span>`
     }
 
     dispatchClose(reason) {