collavre 0.1.0

data/app/javascript/modules/creative_row_swipe.js

@@ -0,0 +1,43 @@
+let initialized = false;
+let startX = null;
+let activeRow = null;
+let allEditVisible = false;
+
+function toggleAllEdits() {
+  allEditVisible = !allEditVisible;
+  document.querySelectorAll('.creative-row').forEach(function(row) {
+    row.classList.toggle('show-edit', allEditVisible);
+  });
+}
+
+document.addEventListener('turbo:load', function() {
+  const toggleBtn = document.getElementById('toggle-edit-btn');
+  if (toggleBtn && !toggleBtn.dataset.editToggleBound) {
+    toggleBtn.addEventListener('click', toggleAllEdits);
+    toggleBtn.dataset.editToggleBound = 'true';
+  }
+
+  if (initialized) return;
+  initialized = true;
+
+  document.addEventListener('touchstart', function(event) {
+    if (allEditVisible) return;
+    activeRow = event.target.closest('.creative-row');
+    startX = activeRow ? event.touches[0].clientX : null;
+  }, { passive: true });
+
+  document.addEventListener('touchend', function(event) {
+    if (allEditVisible || !activeRow || startX === null) return;
+    const diffX = event.changedTouches[0].clientX - startX;
+    if (diffX > 50) {
+      document.querySelectorAll('.creative-row.show-edit').forEach(function(row) {
+        if (row !== activeRow) row.classList.remove('show-edit');
+      });
+      activeRow.classList.add('show-edit');
+    } else if (diffX < -50) {
+      activeRow.classList.remove('show-edit');
+    }
+    activeRow = null;
+    startX = null;
+  });
+});

data/app/javascript/modules/creatives.js

@@ -0,0 +1,15 @@
+document.addEventListener('turbo:load', function() {
+  const btn = document.getElementById('apply-tags');
+  if (!btn) return;
+  if (btn.dataset.listenerAttached === 'true') return;
+  btn.dataset.listenerAttached = 'true';
+
+  btn.addEventListener('click', function() {
+    const checked = Array.from(document.querySelectorAll('.tag-checkbox:checked')).map((cb) => cb.value);
+    let url = '/creatives';
+    if (checked.length > 0) {
+      url += '?tags[]=' + checked.join('&tags[]=');
+    }
+    window.location.href = url;
+  });
+});

data/app/javascript/modules/export_to_markdown.js

@@ -0,0 +1,34 @@
+
+if (!window.isExportMarkdownEnabled) {
+    window.isExportMarkdownEnabled = true;
+
+    document.addEventListener('turbo:load', function () {
+        const exportBtn = document.getElementById('export-markdown-btn');
+        if (exportBtn) {
+            exportBtn.addEventListener('click', function () {
+                // 서버에서 마크다운을 받아 파일로 저장
+                fetch('/creatives/export_markdown' + (exportBtn.dataset.parentCreativeId ? ('?parent_id=' + exportBtn.dataset.parentCreativeId) : ''), {
+                    headers: {'Accept': 'text/markdown'}
+                })
+                    .then(resp => resp.ok ? resp.text() : Promise.reject(exportBtn.dataset.error))
+                    .then(md => {
+                        const blob = new Blob([md], {type: 'text/markdown'});
+                        const url = URL.createObjectURL(blob);
+                        const a = document.createElement('a');
+                        a.href = url;
+                        const titleElement = document.querySelector('.page-title');
+                        const pageTitle = titleElement ? titleElement.textContent.trim() : document.title;
+                        const safeTitle = pageTitle.replace(/[\\/:*?"<>|]+/g, '_') || 'creatives';
+                        a.download = safeTitle + '.md';
+                        document.body.appendChild(a);
+                        a.click();
+                        setTimeout(() => {
+                            document.body.removeChild(a);
+                            URL.revokeObjectURL(url);
+                        }, 0);
+                    })
+                    .catch(err => alert(err));
+            });
+        }
+    });
+}

data/app/javascript/modules/inbox_panel.js

@@ -0,0 +1,226 @@
+// Inbox panel functionality
+// Manages the inbox slide panel UI with pagination and touch gestures
+
+let initialized = false
+
+function initInboxPanel() {
+  if (initialized) return
+  initialized = true
+
+  document.addEventListener('turbo:load', function() {
+    const btns = document.querySelectorAll('.inbox-menu-btn')
+    const panel = document.getElementById('inbox-panel')
+    const list = document.getElementById('inbox-list')
+    const closeBtn = document.getElementById('close-inbox')
+    const toggle = document.getElementById('toggle-inbox-read')
+
+    if (toggle && localStorage.getItem('inboxShowRead') === '1') {
+      toggle.checked = true
+    }
+
+    function updateInboxBadge() {
+      const badges = ['desktop-inbox-badge', 'mobile-inbox-badge']
+        .map(function(id) { return document.getElementById(id) })
+        .filter(function(el) { return el })
+      if (badges.length === 0) return
+      fetch('/inbox/count')
+        .then(r => r.json())
+        .then(data => {
+          badges.forEach(function(badge) {
+            if (data.count > 0) {
+              badge.textContent = data.count
+              badge.style.display = 'inline-block'
+            } else {
+              badge.textContent = ''
+              badge.style.display = 'none'
+            }
+          })
+        })
+    }
+
+    let inboxNextPage = null
+    let inboxIsLoading = false
+
+    function fetchInboxPage(page, append) {
+      if (!list) return Promise.resolve()
+      inboxIsLoading = true
+      const params = new URLSearchParams()
+      params.set('page', page)
+      if (toggle && toggle.checked) {
+        params.set('show', 'all')
+      }
+      return fetch('/inbox?' + params.toString(), { headers: { 'Accept': 'application/json' } })
+        .then(function(r) { return r.json() })
+        .then(function(data) {
+          let container = list.querySelector('#inbox-items')
+          if (!container) {
+            container = document.createElement('div')
+            container.id = 'inbox-items'
+            list.innerHTML = ''
+            list.appendChild(container)
+          } else if (!append) {
+            container.innerHTML = ''
+          }
+
+          if (data.empty && !append) {
+            container.innerHTML = ''
+            const emptyDiv = document.createElement('div')
+            emptyDiv.className = 'inbox-empty'
+            emptyDiv.textContent = list ? (list.dataset.emptyText || '') : ''
+            container.appendChild(emptyDiv)
+          } else if (data.items_html) {
+            if (!append) {
+              container.innerHTML = data.items_html
+            } else {
+              container.insertAdjacentHTML('beforeend', data.items_html)
+            }
+          }
+
+          inboxNextPage = data.next_page
+          container.dataset.nextPage = data.next_page || ''
+          attachActions()
+          updateInboxBadge()
+        })
+        .finally(function() {
+          inboxIsLoading = false
+        })
+    }
+
+    function loadInbox() {
+      if (!list) return Promise.resolve()
+      inboxNextPage = null
+      inboxIsLoading = false
+      list.textContent = list.dataset.loadingText || ''
+      return fetchInboxPage(1, false)
+    }
+
+    function maybeLoadMore() {
+      if (!panel) return
+      if (inboxIsLoading) return
+      if (!inboxNextPage) return
+      if (panel.scrollTop + panel.clientHeight >= panel.scrollHeight - 50) {
+        fetchInboxPage(inboxNextPage, true)
+      }
+    }
+
+    function getCsrfToken() {
+      const meta = document.querySelector('meta[name="csrf-token"]')
+      return meta ? meta.content : ''
+    }
+
+    function attachActions() {
+      document.querySelectorAll('.inbox-item .mark-read').forEach(function(b) {
+        b.onclick = function() {
+          fetch('/inbox/' + b.dataset.id, {
+            method: 'PATCH',
+            headers: {
+              'Content-Type': 'application/json',
+              'X-CSRF-Token': getCsrfToken()
+            },
+            body: JSON.stringify({ state: 'read' })
+          }).then(loadInbox)
+        }
+      })
+      document.querySelectorAll('.inbox-item .mark-unread').forEach(function(b) {
+        b.onclick = function() {
+          fetch('/inbox/' + b.dataset.id, {
+            method: 'PATCH',
+            headers: {
+              'Content-Type': 'application/json',
+              'X-CSRF-Token': getCsrfToken()
+            },
+            body: JSON.stringify({ state: 'new' })
+          }).then(loadInbox)
+        }
+      })
+      document.querySelectorAll('.inbox-item .delete-item').forEach(function(b) {
+        b.onclick = function() {
+          fetch('/inbox/' + b.dataset.id, {
+            method: 'DELETE',
+            headers: { 'X-CSRF-Token': getCsrfToken() }
+          }).then(loadInbox)
+        }
+      })
+      document.querySelectorAll('.inbox-item .item-link').forEach(function(a) {
+        // Use onclick assignment to prevent duplicate listeners on pagination append
+        a.onclick = function() {
+          localStorage.setItem('inboxOpen', '1')
+          const item = a.closest('.inbox-item')
+          if (item && item.dataset.id) {
+            fetch('/inbox/' + item.dataset.id, {
+              method: 'PATCH',
+              headers: {
+                'Content-Type': 'application/json',
+                'X-CSRF-Token': getCsrfToken()
+              },
+              body: JSON.stringify({ state: 'read' }),
+              keepalive: true
+            })
+          }
+        }
+      })
+    }
+
+    function openPanel() {
+      if (!panel) return
+      panel.classList.add('open')
+      localStorage.setItem('inboxOpen', '1')
+      loadInbox()
+      document.body.classList.add('no-scroll')
+    }
+
+    function closePanel() {
+      if (!panel) return
+      panel.classList.remove('open')
+      localStorage.removeItem('inboxOpen')
+      document.body.classList.remove('no-scroll')
+    }
+
+    let startX = null
+    if (panel) {
+      panel.addEventListener('touchstart', function(e) {
+        startX = e.touches[0].clientX
+      })
+      panel.addEventListener('touchend', function(e) {
+        if (startX !== null) {
+          const diffX = e.changedTouches[0].clientX - startX
+          if (diffX > 50) {
+            closePanel()
+          }
+        }
+        startX = null
+      })
+      panel.addEventListener('scroll', maybeLoadMore)
+    }
+
+    btns.forEach(function(btn) {
+      if (panel) {
+        btn.addEventListener('click', function() {
+          if (panel.classList.contains('open')) {
+            closePanel()
+          } else {
+            openPanel()
+          }
+        })
+      }
+    })
+    if (closeBtn) { closeBtn.addEventListener('click', closePanel) }
+    if (toggle) {
+      toggle.addEventListener('change', function() {
+        localStorage.setItem('inboxShowRead', toggle.checked ? '1' : '0')
+        loadInbox()
+      })
+    }
+
+    updateInboxBadge()
+
+    if (panel && btns.length > 0 && localStorage.getItem('inboxOpen') === '1') {
+      panel.classList.add('open')
+      loadInbox()
+    } else if (btns.length === 0) {
+      localStorage.removeItem('inboxOpen')
+    }
+  })
+}
+
+initInboxPanel()

data/app/javascript/modules/lexical_inline_editor.jsx

@@ -0,0 +1,133 @@
+import { createRoot } from "react-dom/client"
+import { $getRoot } from "lexical"
+import InlineLexicalEditor from "../components/InlineLexicalEditor"
+
+const DEFAULT_KEY = "creative-inline-editor"
+
+export function createInlineEditor(container, {
+  onChange,
+  onKeyDown,
+
+  onUploadStateChange
+} = {}) {
+  if (!container) {
+    throw new Error("Lexical editor container not found")
+  }
+
+  const root = createRoot(container)
+  let suppressNextChange = false
+  let focusHandler = () => { }
+  let editorInstance = null
+  let editorReady = false
+  let pendingFocus = false
+  let currentKey = DEFAULT_KEY
+  let currentHtml = ""
+  const directUploadUrl = container.dataset.directUploadUrl || null
+  const blobUrlTemplate = container.dataset.blobUrlTemplate || null
+  const placeholderText = container.dataset.placeholder || null
+
+  const deletedAttachmentsRef = { current: [] }
+
+  function render(html, key = currentKey) {
+    currentKey = key
+    currentHtml = html ?? ""
+    suppressNextChange = true
+    editorReady = false
+    deletedAttachmentsRef.current = []
+    if (container.dataset) {
+      container.dataset.editorReady = "false"
+    }
+    root.render(
+      <InlineLexicalEditor
+        initialHtml={currentHtml}
+        editorKey={currentKey}
+        placeholderText={placeholderText}
+        // onPromptForLink removed
+        onKeyDown={(event, editor) => {
+          if (onKeyDown) onKeyDown(event, editor)
+        }}
+        onChange={(value) => {
+          if (suppressNextChange) {
+            suppressNextChange = false
+            return
+          }
+          currentHtml = value
+          onChange?.(value)
+        }}
+        onReady={(api) => {
+          focusHandler = api?.focus ?? (() => { })
+          editorInstance = api?.getEditor?.()
+          editorReady = true
+          if (container.dataset) {
+            container.dataset.editorReady = "true"
+          }
+          if (pendingFocus) {
+            requestAnimationFrame(() => {
+              focusHandler()
+              pendingFocus = false
+            })
+          }
+        }}
+        onUploadStateChange={onUploadStateChange}
+        directUploadUrl={directUploadUrl}
+        blobUrlTemplate={blobUrlTemplate}
+        deletedAttachmentsRef={deletedAttachmentsRef}
+      />
+    )
+  }
+
+  render("")
+
+  return {
+    load(html, key) {
+      render(html ?? "", key)
+    },
+    reset(key) {
+      render("", key)
+    },
+    focus() {
+      pendingFocus = true
+      if (editorReady) {
+        requestAnimationFrame(() => {
+          focusHandler()
+          pendingFocus = false
+        })
+      }
+    },
+    focusAtStart() {
+      pendingFocus = true
+      if (editorReady && editorInstance) {
+        editorInstance.update(() => {
+          const root = $getRoot()
+          const firstChild = root.getFirstChild()
+          if (firstChild) {
+            if (firstChild.selectStart) {
+              firstChild.selectStart()
+            } else {
+              root.selectStart()
+            }
+          } else {
+            root.selectStart()
+          }
+        })
+        requestAnimationFrame(() => {
+          focusHandler()
+          pendingFocus = false
+        })
+      }
+    },
+    destroy() {
+      if (container.dataset) {
+        delete container.dataset.editorReady
+      }
+      root.unmount()
+    },
+    getDeletedAttachments() {
+      const ids = Array.from(deletedAttachmentsRef.current || [])
+      deletedAttachmentsRef.current = []
+      return ids
+    }
+  }
+}
+
+

data/app/javascript/modules/mention_menu.js

@@ -0,0 +1,77 @@
+import CommonPopup from '../lib/common_popup'
+import { getCaretClientRect } from '../utils/caret_position'
+
+let mentionMenuInitialized = false
+
+if (!mentionMenuInitialized) {
+  mentionMenuInitialized = true
+
+  document.addEventListener('turbo:load', function () {
+    const textarea = document.querySelector('#new-comment-form textarea')
+    const menu = document.getElementById('mention-menu')
+    const popup = document.getElementById('comments-popup')
+    if (!textarea || !menu) return
+
+    const list = menu.querySelector('.mention-results')
+    let fetchTimer
+
+    const popupMenu = new CommonPopup(menu, {
+      listElement: list,
+      renderItem: (user) => `<div class="mention-item"><img src="${user.avatar_url}" width="20" height="20" class="avatar" /> ${user.name}</div>`,
+      onSelect: (user) => {
+        insert(user)
+        popupMenu.hide()
+        textarea.focus()
+      },
+    })
+
+    function insert(user) {
+      const pos = textarea.selectionStart
+      const before = textarea.value.slice(0, pos).replace(/@[^@\s]*$/, `@${user.name}: `)
+      textarea.value = before + textarea.value.slice(pos)
+      textarea.setSelectionRange(before.length, before.length)
+    }
+
+    function hide() {
+      popupMenu.hide()
+    }
+
+    function show(users) {
+      if (!users || users.length === 0) {
+        hide()
+        return
+      }
+      popupMenu.setItems(users)
+      const caretRect = getCaretClientRect(textarea) || textarea.getBoundingClientRect()
+      popupMenu.showAt(caretRect)
+    }
+
+    textarea.addEventListener('keydown', function (event) {
+      if (popupMenu.handleKey(event)) return
+    })
+
+    textarea.addEventListener('input', function () {
+      const pos = textarea.selectionStart
+      const before = textarea.value.slice(0, pos)
+      const m = before.match(/@([^\s@]*)$/)
+      if (m) {
+        const q = m[1]
+        if (q.length === 0) { hide(); return }
+        clearTimeout(fetchTimer)
+        fetchTimer = setTimeout(function () {
+          const url = new URL('/users/search', window.location.origin)
+          url.searchParams.set('q', q)
+          if (popup && popup.dataset.creativeId) {
+            url.searchParams.set('creative_id', popup.dataset.creativeId)
+          }
+          fetch(url, { headers: { Accept: 'application/json' } })
+            .then(function (r) { return r.ok ? r.json() : [] })
+            .then(show)
+            .catch(function () { })
+        }, 200)
+      } else {
+        hide()
+      }
+    })
+  })
+}

data/app/javascript/modules/plans_menu.js

@@ -0,0 +1,39 @@
+// Plans menu functionality
+// Handles the plans menu button click and lazy-loads plans data
+
+let initialized = false
+
+function initPlansMenu() {
+  if (initialized) return
+  initialized = true
+
+  document.addEventListener('turbo:load', function() {
+    const btns = document.querySelectorAll('.plans-menu-btn')
+    const area = document.getElementById('plans-list-area')
+    let loaded = false
+    const timeline = document.getElementById('plans-timeline')
+
+    btns.forEach(function(btn) {
+      btn.addEventListener('click', function() {
+        if (area.style.display === 'none') {
+          area.style.display = 'block'
+          if (!loaded) {
+            fetch('/plans.json')
+              .then(function(r) { return r.json() })
+              .then(function(plans) {
+                if (timeline) { timeline.dataset.plans = JSON.stringify(plans) }
+                if (window.initPlansTimeline && timeline) {
+                  window.initPlansTimeline(timeline)
+                }
+                loaded = true
+              })
+          }
+        } else {
+          area.style.display = 'none'
+        }
+      })
+    })
+  })
+}
+
+initPlansMenu()