collavre 0.12.1 → 0.12.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: db1e7fbfb6264f74d110ff1e1655db8fef80c6d7aa096272174a262a60324bf6
-  data.tar.gz: 5ae55bd529c1530c0fbb79b0428e736f59883e1c7c2a912135f635224f31f554
+  metadata.gz: e5cc8288417aa35fba130bae92aeb47383ba3f53dd10fb3e9d1d46d65605fbf2
+  data.tar.gz: 7862466adcb4e962f1a0fb5aa62f3958cafe98469df3da543d3df9d12b2c6bc7
 SHA512:
-  metadata.gz: da01c7daa5fa38b5bff3bdfbe3212065f2e5ea1ad480cdf7b79c8c5888909350f92f4c053e98de97d7852293719620ed21c25430b1283ac4d4146c90ba9f3d30
-  data.tar.gz: 7f1de4112b1ac732a17dc908cbcd9ef9b1c88d83565f49c1243779b536d1080358405e5c4aa6281e38ea1668253ac6fdb5d99abb96cff40658f5f00b4252784e
+  metadata.gz: fd4d1f51f6dd4044b1d5d7c09f06437dc4dd59962c2632486794a4dcfc2eb8baa01dd8ecd6ece69b54d9296bf8a1dc3a237f190ccd02b75c54a5074fe89b09d7
+  data.tar.gz: 5ec2172df49895ba3de6063f18373c52cefb8e475f829590e46a086b6b86a298782862936da30925bcd574fff8642fc5ba7ebba28ea7f68f2147fed27a0aa800

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

@@ -56,14 +56,48 @@
   top: calc(100% + 0.35rem);
   left: 0;
   z-index: 10;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.4rem 0.5rem;
-  background: var(--surface-bg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  background: var(--surface-section);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-2);
   box-shadow: var(--shadow-3);
+  min-width: 180px;
+}
+
+.lexical-toolbar-color__tokens {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-1);
+}
+
+.lexical-toolbar-color__token-btn {
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-2);
+  cursor: pointer;
+  padding: 0;
+  transition: transform 0.1s var(--ease-out-2);
+}
+
+.lexical-toolbar-color__token-btn:hover {
+  transform: scale(1.15);
+  border-color: var(--color-active);
+}
+
+.lexical-toolbar-color__token-btn.active {
+  box-shadow: 0 0 0 2px var(--color-active);
+}
+
+.lexical-toolbar-color__custom-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  border-top: 1px solid var(--border-color);
+  padding-top: var(--space-2);
 }
 
 .lexical-toolbar-color__popover input[type="color"] {
@@ -74,6 +108,7 @@
   height: var(--space-7);
   padding: 0;
   background: transparent;
+  flex-shrink: 0;
 }
 
 .lexical-toolbar-btn--small {

data/app/javascript/components/InlineLexicalEditor.jsx

@@ -273,10 +273,40 @@ function CodeHighlightingPlugin() {
   return null
 }
 
-function ToolbarColorPicker({ icon, title, color, onChange, onClear }) {
+const EDITOR_TEXT_TOKENS = [
+  { token: "var(--text-primary)", label: "Primary" },
+  { token: "var(--text-muted)", label: "Muted" },
+  { token: "var(--color-danger)", label: "Danger" },
+  { token: "var(--color-warning)", label: "Warning" },
+  { token: "var(--color-brand)", label: "Brand" },
+  { token: "var(--color-link)", label: "Link" },
+  { token: "var(--color-accent-text)", label: "Accent" },
+  { token: "var(--color-code-text)", label: "Code" }
+]
+
+const EDITOR_BG_TOKENS = [
+  { token: "var(--surface-bg)", label: "Background" },
+  { token: "var(--color-highlight)", label: "Highlight" },
+  { token: "var(--color-brand)", label: "Brand" },
+  { token: "var(--color-accent-border)", label: "Accent" },
+  { token: "var(--color-danger)", label: "Danger" },
+  { token: "var(--color-warning)", label: "Warning" },
+  { token: "var(--color-code-bg)", label: "Code" },
+  { token: "var(--surface-hover)", label: "Hover" }
+]
+
+function resolveColorForInput(color) {
+  if (!color || !color.startsWith("var(")) return color
+  const match = color.match(/^var\(([^)]+)\)$/)
+  if (!match) return color
+  return getComputedStyle(document.documentElement).getPropertyValue(match[1]).trim() || color
+}
+
+function ToolbarColorPicker({ icon, title, color, onChange, onClear, colorType }) {
   const [open, setOpen] = useState(false)
   const triggerRef = useRef(null)
   const popoverRef = useRef(null)
+  const tokens = colorType === "background" ? EDITOR_BG_TOKENS : EDITOR_TEXT_TOKENS
 
   useEffect(() => {
     if (!open) return
@@ -294,6 +324,8 @@ function ToolbarColorPicker({ icon, title, color, onChange, onClear }) {
     return () => document.removeEventListener("mousedown", handleClick)
   }, [open])
 
+  const resolvedColor = resolveColorForInput(color)
+
   return (
     <div className="lexical-toolbar-color" title={title}>
       <button
@@ -306,20 +338,37 @@ function ToolbarColorPicker({ icon, title, color, onChange, onClear }) {
       </button>
       {open ? (
         <div className="lexical-toolbar-color__popover" ref={popoverRef}>
-          <input
-            type="color"
-            value={color}
-            onChange={(event) => onChange(event.target.value)}
-          />
-          <button
-            type="button"
-            className="lexical-toolbar-btn lexical-toolbar-btn--small"
-            onClick={() => {
-              onClear()
-              setOpen(false)
-            }}>
-            ✕
-          </button>
+          <div className="lexical-toolbar-color__tokens">
+            {tokens.map(({ token, label }) => (
+              <button
+                key={token}
+                type="button"
+                className={`lexical-toolbar-color__token-btn${color === token ? " active" : ""}`}
+                style={{ backgroundColor: token }}
+                title={label}
+                onClick={() => {
+                  onChange(token)
+                  setOpen(false)
+                }}
+              />
+            ))}
+          </div>
+          <div className="lexical-toolbar-color__custom-row">
+            <input
+              type="color"
+              value={resolvedColor.startsWith("#") ? resolvedColor : "#000000"}
+              onChange={(event) => onChange(event.target.value)}
+            />
+            <button
+              type="button"
+              className="lexical-toolbar-btn lexical-toolbar-btn--small"
+              onClick={() => {
+                onClear()
+                setOpen(false)
+              }}>
+              ✕
+            </button>
+          </div>
         </div>
       ) : null}
     </div>
@@ -696,6 +745,7 @@ function Toolbar() {
         icon="🎨"
         title="Text color"
         color={fontColor}
+        colorType="text"
         onChange={(value) => {
           setFontColor(value)
           applyTextStyle({ color: value })
@@ -709,6 +759,7 @@ function Toolbar() {
         icon="🖌️"
         title="Background color"
         color={bgColor}
+        colorType="background"
         onChange={(value) => {
           setBgColor(value)
           applyTextStyle({ "background-color": value })

data/app/javascript/lib/turbo_stream_actions.js

@@ -75,8 +75,14 @@ function handleCreated(creative) {
         targetContainer.style.display = ''
         if (targetContainer.dataset) targetContainer.dataset.expanded = 'true'
 
-        const newRow = createRow(creative)
-        insertAtCorrectPosition(newRow, creative, targetContainer)
+        // Adjust broadcast level (absolute) to relative level for the current view
+        const relativeLevel = computeRelativeLevel(creative)
+        const adjustedCreative = relativeLevel != null
+            ? { ...creative, level: relativeLevel }
+            : creative
+
+        const newRow = createRow(adjustedCreative)
+        insertAtCorrectPosition(newRow, adjustedCreative, targetContainer)
     }
     // If no targetContainer found, the creative is relevant but we can't determine
     // the exact insertion point — it will appear on next page load.
@@ -230,6 +236,25 @@ function findRowsForCreative(creativeId, originId) {
     return rows
 }
 
+// Compute the correct relative level for a creative based on its parent's DOM level.
+// The broadcast sends absolute level (ancestors.size + 1), but the tree view uses
+// relative levels starting at 1. Without this adjustment, broadcasts after drag & drop
+// on sub-pages would overwrite the relative level with the absolute level, causing
+// creatives to appear 1-3 levels deeper than expected.
+function computeRelativeLevel(creative) {
+    const parentId = creative.parent_id
+    if (!parentId) return 1 // root-level creative
+
+    const parentRow = document.querySelector(`creative-tree-row[creative-id="${parentId}"]`)
+    if (!parentRow) return null // parent not in DOM — cannot compute
+
+    // Title row's children start at level 1 (same as title), not level + 1
+    if (parentRow.hasAttribute('is-title')) return 1
+
+    const parentLevel = Number(parentRow.getAttribute('level') || parentRow.level || 1)
+    return parentLevel + 1
+}
+
 function handleUpdated(creative) {
     // Notify popup controllers about creative data changes (e.g. trigger state)
     // Must fire before the early return — popup may be open for a creative
@@ -241,6 +266,13 @@ function handleUpdated(creative) {
     const rows = findRowsForCreative(creative.id, creative.origin_id)
     if (rows.length === 0) return
 
+    // Adjust broadcast level (absolute) to relative level (based on parent's DOM level).
+    // This prevents the level from jumping when viewing sub-pages.
+    const relativeLevel = computeRelativeLevel(creative)
+    const adjustedCreative = relativeLevel != null
+        ? { ...creative, level: relativeLevel }
+        : creative
+
     // Find currently editing creative ID to skip it
     const editForm = document.querySelector('#inline-edit-form-element')
     const editingId = editForm?.dataset?.creativeId
@@ -248,11 +280,11 @@ function handleUpdated(creative) {
     rows.forEach(row => {
         if (String(creative.id) === String(editingId)) {
             if (creative.inline_editor_payload) {
-                row.dataset.pendingSyncData = JSON.stringify(creative)
+                row.dataset.pendingSyncData = JSON.stringify(adjustedCreative)
             }
             return
         }
-        applyRowProperties(row, creative)
+        applyRowProperties(row, adjustedCreative)
     })
 }
 

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

@@ -2,6 +2,9 @@
 <% if authenticated? %>
   <%= turbo_stream_from Current.user, :creative_tree %>
 <% end %>
+<% if @auto_fullscreen %>
+  <% content_for :comments_popup_auto_fullscreen, "true" %>
+<% end %>
 
 <div data-controller="creatives--import creatives--select-mode creatives--drag-drop creatives--expansion creatives--row-editor share-modal"
      data-creatives--import-parent-id-value="<%= @parent_creative&.id %>"
@@ -222,7 +225,6 @@
       }
     ) %>
 
-<%= render 'collavre/comments/comments_popup', auto_fullscreen: @auto_fullscreen %>
 <%= render 'inline_edit_form' %>
 
 <%= render_extension_slot(:creative_modals) %>

data/app/views/collavre/shared/navigation/_panels.html.erb

@@ -1,5 +1,10 @@
 <%= render_extension_slot(:navigation_panels) %>
 
+<% if Current.user %>
+  <%= render 'collavre/comments/comments_popup',
+             auto_fullscreen: content_for?(:comments_popup_auto_fullscreen) %>
+<% end %>
+
 <div id="creative-guide-popover" style="display:none; position:fixed; top:60px; left:50%; transform:translateX(-50%); background:white; border:1px solid var(--color-border); box-shadow:0 2px 8px rgba(0,0,0,0.12); padding:1.2em; max-width:400px; z-index:1000; border-radius:8px;">
   <button type="button" id="close-creative-guide" class="popup-close-btn">&times;</button>
   <div style="margin-top:0.5em; color:#444; font-size:1em; line-height:1.5;">

data/lib/collavre/version.rb

@@ -1,3 +1,3 @@
 module Collavre
-  VERSION = "0.12.1"
+  VERSION = "0.12.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: collavre
 version: !ruby/object:Gem::Version
-  version: 0.12.1
+  version: 0.12.2
 platform: ruby
 authors:
 - Collavre