collavre 0.1.0

data/app/javascript/controllers/reaction_picker_controller.js

@@ -0,0 +1,107 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    connect() {
+        this.open = this.open.bind(this)
+        window.addEventListener('reaction-picker:open', this.open)
+        this.currentController = null
+    }
+
+    disconnect() {
+        window.removeEventListener('reaction-picker:open', this.open)
+    }
+
+    open(event) {
+        const { controller, target } = event.detail
+        this.currentController = controller
+
+        // Position the picker
+        // We need to capture the rect NOW before any layout shifts, 
+        // but we need to wait for the picker to be unhidden to get its size.
+        const targetRect = target.getBoundingClientRect()
+
+        this.element.hidden = false
+
+        // Wait for next frame to ensure rendering is complete and dimensions are correct
+        requestAnimationFrame(() => {
+            if (this.element.hidden) return // Closed in the meantime
+            this.ensureOnScreen(targetRect)
+        })
+    }
+
+    close() {
+        this.element.hidden = true
+        this.currentController = null
+    }
+
+    select(event) {
+        event.preventDefault()
+        event.stopPropagation()
+        const emoji = event.currentTarget.dataset.emoji
+
+        if (this.currentController && emoji) {
+            this.currentController.submitReaction(emoji, false)
+        }
+
+        this.close()
+    }
+
+    handleClickOutside(event) {
+        if (this.element.hidden) return
+        if (this.element.contains(event.target)) return
+
+        // Check if the click was on the trigger button (optional, but good UX to toggle)
+        // Actually, if we click outside, we just close.
+        // Note: The event might be the open click itself? No, 'click@window' usually fires after.
+        // We should ensure we don't close immediately if the event is the one that opened it.
+        // Stimulus action 'click@window' might catch the trigger click if bubbling.
+        // Usually we stopPropagation on the trigger, or checking if event.target is part of the detail.
+
+        this.close()
+    }
+
+    ensureOnScreen(targetRect) {
+        const height = this.element.offsetHeight
+        const width = this.element.offsetWidth
+        const windowWidth = window.innerWidth
+        const windowHeight = window.innerHeight
+
+        // Requirement: "reaction 버튼 위에 표시되어야 해" (Must be displayed above)
+        // Requirement: "화면을 나가지 않는 범위에서" (Within screen boundaries)
+
+        // Strategy: Always attempt to place above.
+        // Calculate ideal top position (above button with 8px gap)
+        let top = targetRect.top - height - 8
+
+        // 1. Top Boundary Check
+        if (top < 10) {
+            // If it goes off the top, clamp it to 10px from top.
+            // This might overlap the button if the button is very high up, 
+            // but strictly adheres to "within screen" and "as above as possible".
+            top = 10
+        }
+
+        // 2. Bottom Boundary Check (rare, but if picker is huge)
+        const maxTop = windowHeight - height - 10
+        if (top > maxTop) {
+            top = maxTop
+        }
+
+        let left = targetRect.left
+
+        // 3. Horizontal Boundary Check
+        // Left edge
+        if (left < 10) {
+            left = 10
+        }
+        // Right edge
+        if (left + width > windowWidth - 10) {
+            left = windowWidth - width - 10
+        }
+        // Final sanity check for left if width > windowWidth
+        if (left < 10) left = 10
+
+        this.element.style.top = `${top}px`
+        this.element.style.left = `${left}px`
+    }
+}

data/app/javascript/controllers/share_invite_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["email", "submit"]
+
+  check() {
+    const email = this.emailTarget.value
+    if (!email) return
+    fetch(`/users/exists?email=${encodeURIComponent(email)}`)
+      .then(r => r.json())
+      .then(data => {
+        this.submitTarget.textContent = data.exists ? this.submitTarget.dataset.share : this.submitTarget.dataset.invite
+      })
+  }
+}

data/app/javascript/controllers/share_user_search_controller.js

@@ -0,0 +1,121 @@
+import { Controller } from '@hotwired/stimulus'
+import CommonPopup from '../lib/common_popup'
+
+export default class extends Controller {
+    static targets = ['input']
+    static values = {
+        creativeId: String,
+        scope: String
+    }
+
+    connect() {
+        this.popupElement = document.getElementById('share-user-suggestions')
+        if (this.popupElement) {
+            this.popup = new CommonPopup(this.popupElement, {
+                onSelect: this.select.bind(this),
+                renderItem: this.renderItem.bind(this)
+            })
+        }
+
+        // Bind handleKey so we can remove it on disconnect if needed, 
+        // although Stimulus handles controller instance methods well.
+        // However, since we might need to pass it to other listeners:
+        this.handleKey = this.handleKey.bind(this)
+    }
+
+    disconnect() {
+        this.popup?.hide()
+        this.popup = null
+    }
+
+    async input() {
+        const query = this.inputTarget.value.trim()
+        // Allow empty query if scope is present (contacts), otherwise require 1 char
+        if (!this.scopeValue && query.length < 1) {
+            this.popup?.hide()
+            return
+        }
+
+        // Basic debounce
+        clearTimeout(this.timeout)
+        this.timeout = setTimeout(() => this.search(query), 300)
+    }
+
+    focus() {
+        // Trigger search immediately on focus to show default list (e.g. contacts)
+        this.input()
+    }
+
+    async search(query) {
+        try {
+            let url = `/users/search?q=${encodeURIComponent(query)}&limit=20`
+            if (this.creativeIdValue) {
+                url += `&creative_id=${this.creativeIdValue}`
+            }
+            if (this.scopeValue) {
+                url += `&scope=${this.scopeValue}`
+            }
+            const response = await fetch(url, {
+                headers: {
+                    'Accept': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest'
+                }
+            })
+
+            if (!response.ok) return
+
+            const users = await response.json()
+            // format: [{ id, email, display_name, avatar_url }, ...] (assuming API structure)
+            // If the API returns something else, I'll need to adjust.
+            // Based on typical Rails users/search?q=..., it likely returns a list of users.
+            // I'll assume they have email and display_name.
+
+            const items = users.map(user => ({
+                value: user.email,
+                label: user.name || user.email, // fallback
+                user: user
+            }))
+
+            if (items.length > 0) {
+                this.popup?.setItems(items)
+                this.popup?.showAt(this.inputTarget.getBoundingClientRect())
+            } else {
+                this.popup?.hide()
+            }
+        } catch (error) {
+            console.error('Error searching users:', error)
+        }
+    }
+
+    select(item) {
+        this.inputTarget.value = item.value
+        this.inputTarget.dispatchEvent(new Event('blur')) // Trigger validation if any
+        this.popup?.hide()
+    }
+
+    handleKey(event) {
+        console.log('ShareUserSearchController handleKey', event.key, this.popup?.isOpen(), this.popup?.items?.length)
+        // Delegate key handling to the popup
+        if (this.popup?.handleKey(event)) {
+            // If popup handled it, query is consumed
+            console.log('Popup handled key')
+        }
+    }
+
+    renderItem(item) {
+        const user = item.user
+        const avatarUrl = user.avatar_url // if available, or we might need a placeholder
+        // Safe guard avatar if not present. CommonPopup sends innerHTML, so we return a string.
+        // We can try to use a similar style to the mentions.
+
+        return `
+      <div style="display: flex; align-items: center; gap: 8px; padding: 4px 8px;">
+        ${avatarUrl ? `<img src="${avatarUrl}" class="avatar size-20" style="width:20px;height:20px;border-radius:50%;">` : ''}
+        <div style="display: flex; flex-direction: column;">
+          <span style="font-weight: 500;">${item.label}</span>
+          <span style="font-size: 0.85em; color: #666;">${item.value}</span>
+        </div>
+      </div>
+    `
+    }
+}

data/app/javascript/controllers/tabs_controller.js

@@ -0,0 +1,43 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "panel", "tabButton" ]
+  static values = { activeTab: String }
+
+  connect() {
+    if (!this.hasActiveTabValue) {
+      this.activeTabValue = "profile"
+    }
+    this.showActive()
+  }
+
+  switch(event) {
+    event.preventDefault()
+    const tab = event.params?.tab || event.currentTarget.dataset.tabsTabParam
+    if (!tab) return
+
+    this.activeTabValue = tab
+    this.showActive()
+    this.updateUrl(tab)
+  }
+
+  showActive() {
+    this.panelTargets.forEach((panel) => {
+      panel.classList.toggle("active", panel.dataset.tabName === this.activeTabValue)
+    })
+
+    this.tabButtonTargets.forEach((button) => {
+      button.classList.toggle("active", button.dataset.tabsTabParam === this.activeTabValue)
+    })
+  }
+
+  updateUrl(tab) {
+    if (typeof window === "undefined") return
+    const url = new URL(window.location)
+    url.searchParams.set("tab", tab)
+    if (tab !== "contacts") {
+      url.searchParams.delete("contact_page")
+    }
+    window.history.replaceState({}, "", url)
+  }
+}

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

@@ -0,0 +1,170 @@
+export const DRAGGABLE_SELECTOR = '.creative-tree';
+
+export function clearDragHighlight(tree) {
+  if (!tree) return;
+  tree.classList.remove(
+    'drag-over',
+    'drag-over-top',
+    'drag-over-bottom',
+    'drag-over-child',
+    'child-drop-indicator-active'
+  );
+}
+
+export function asTreeRow(node) {
+  return node ? node.closest('creative-tree-row') : null;
+}
+
+export function getChildrenContainer(row) {
+  if (!row) return null;
+  const creativeId = row.getAttribute('creative-id');
+  if (!creativeId) return null;
+  return document.getElementById(`creative-children-${creativeId}`);
+}
+
+export function ensureChildrenContainer(row) {
+  if (!row) return null;
+  const creativeId = row.getAttribute('creative-id');
+  if (!creativeId) return null;
+  let container = document.getElementById(`creative-children-${creativeId}`);
+  if (!container) {
+    container = document.createElement('div');
+    container.className = 'creative-children';
+    container.id = `creative-children-${creativeId}`;
+    container.dataset.loaded = 'true';
+    container.dataset.expanded = 'true';
+    container.style.display = '';
+    row.parentNode?.insertBefore(container, row.nextSibling);
+  }
+  return container;
+}
+
+function getNodeAfterBlock(row) {
+  if (!row) return null;
+  const children = getChildrenContainer(row);
+  let node = children ? children.nextSibling : row.nextSibling;
+  while (node && node.nodeType === Node.TEXT_NODE) {
+    node = node.nextSibling;
+  }
+  return node;
+}
+
+export function moveBlockBefore(draggedRow, draggedChildren, referenceRow) {
+  const parent = referenceRow.parentNode;
+  parent.insertBefore(draggedRow, referenceRow);
+  if (draggedChildren) parent.insertBefore(draggedChildren, referenceRow);
+}
+
+export function moveBlockAfter(draggedRow, draggedChildren, referenceRow) {
+  const parent = referenceRow.parentNode;
+  const afterNode = getNodeAfterBlock(referenceRow);
+  parent.insertBefore(draggedRow, afterNode);
+  if (draggedChildren) parent.insertBefore(draggedChildren, afterNode);
+}
+
+export function appendBlockToContainer(draggedRow, draggedChildren, container) {
+  container.appendChild(draggedRow);
+  if (draggedChildren) container.appendChild(draggedChildren);
+}
+
+export function isDescendantRow(parentRow, candidateRow) {
+  const container = getChildrenContainer(parentRow);
+  if (!container) return false;
+  return container.contains(candidateRow);
+}
+
+export function updateRowLevel(row, delta) {
+  const current = Number(row.getAttribute('level') || row.level || 1);
+  const next = Math.max(1, current + delta);
+  if (row.level !== next) row.level = next;
+  row.setAttribute('level', next);
+  const tree = row.querySelector('.creative-tree');
+  if (tree) tree.dataset.level = String(next);
+  row.requestUpdate?.();
+}
+
+export function applyLevelDelta(row, delta) {
+  if (!row || delta === 0) return;
+  updateRowLevel(row, delta);
+  const childrenContainer = getChildrenContainer(row);
+  if (!childrenContainer) return;
+  const childRows = childrenContainer.querySelectorAll(':scope > creative-tree-row');
+  childRows.forEach((childRow) => applyLevelDelta(childRow, delta));
+}
+
+export function setRowParent(row, parentId) {
+  if (!row) return;
+  if (parentId) {
+    if (row.parentId !== parentId) row.parentId = parentId;
+    row.setAttribute('parent-id', parentId);
+  } else {
+    row.parentId = null;
+    row.removeAttribute('parent-id');
+  }
+  const tree = row.querySelector('.creative-tree');
+  if (tree) {
+    if (parentId) {
+      tree.dataset.parentId = parentId;
+    } else {
+      delete tree.dataset.parentId;
+    }
+  }
+  row.requestUpdate?.();
+}
+
+export function setRowRootState(row, isRoot) {
+  if (!row) return;
+  if (isRoot) {
+    row.isRoot = true;
+    row.setAttribute('is-root', '');
+  } else {
+    row.isRoot = false;
+    row.removeAttribute('is-root');
+  }
+  row.requestUpdate?.();
+}
+
+export function setHasChildren(row, hasChildren) {
+  if (!row) return;
+  if (hasChildren) {
+    row.hasChildren = true;
+    row.setAttribute('has-children', '');
+  } else {
+    row.hasChildren = false;
+    row.removeAttribute('has-children');
+  }
+  row.requestUpdate?.();
+}
+
+export function setExpanded(row, expanded, container) {
+  if (!row) return;
+  if (expanded) {
+    row.expanded = true;
+    row.setAttribute('expanded', '');
+    if (container) {
+      container.style.display = '';
+      container.dataset.expanded = 'true';
+      if (!container.dataset.loaded) container.dataset.loaded = 'true';
+    }
+  } else {
+    row.expanded = false;
+    row.removeAttribute('expanded');
+    if (container) {
+      container.style.display = 'none';
+      container.dataset.expanded = 'false';
+    }
+  }
+  row.requestUpdate?.();
+}
+
+export function syncParentHasChildren(parentId) {
+  if (!parentId) return;
+  const parentRow = document.querySelector(`creative-tree-row[creative-id="${parentId}"]`);
+  if (!parentRow) return;
+  const container = getChildrenContainer(parentRow);
+  const hasChildren = !!(container && container.querySelector('creative-tree-row'));
+  setHasChildren(parentRow, hasChildren);
+  if (!hasChildren) {
+    setExpanded(parentRow, false, container);
+  }
+}