collavre 0.12.0 → 0.12.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bfb336e9ba2c33ae2bebe02cb641ca55078e8a9e7b7534a2296fb9fe344e8ab8
-  data.tar.gz: 92446cc1f6e94e96c85bb3d623675671b3a1c918dbe18f365ea4cadcf9844a8f
+  metadata.gz: e5cc8288417aa35fba130bae92aeb47383ba3f53dd10fb3e9d1d46d65605fbf2
+  data.tar.gz: 7862466adcb4e962f1a0fb5aa62f3958cafe98469df3da543d3df9d12b2c6bc7
 SHA512:
-  metadata.gz: ef40b534cba46f348398f4097be26d8398dade4008cbef542fb8faaccebe5a7bc2647ba3666e5020cf1e32d29e8c9e4d37d877036c6b443c67247735221e68c0
-  data.tar.gz: 5dd19bdf5053beea83aeba18edc324df6fc86f429abf4f3e2a160d4728cc4c35a638adaace885d87855d0e5f71c8c578aa8280877126fada04b2e9ec29d0ca3b
+  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/assets/stylesheets/collavre/creatives.css

@@ -621,6 +621,11 @@ creative-tree-row.chat-active .creative-row {
     font-size: 1.4em;
 }
 
+/* ── Title text: larger than default h1 ── */
+.creative-tree-title .page-title {
+    font-size: var(--text-5, 2rem);
+}
+
 
 /* Constrain images within creative-row to prevent overflow */
 .creative-row img {

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

@@ -251,14 +251,16 @@ input[type="datetime-local"]::-webkit-datetime-edit-minute-field {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 1.2em;
-  padding: 0.05em 0.35em;
+  min-width: var(--space-3);
+  height: var(--space-3);
+  padding: 0 0.3em;
   font-size: 0.65rem;
   font-weight: 600;
   line-height: 1;
   border-radius: var(--radius-round, 9999px);
   background: var(--color-badge-bg);
   color: var(--text-on-badge);
+  box-sizing: border-box;
 }
 
 .badge-success {

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

@@ -113,14 +113,18 @@ nav .popup-menu-item a:hover {
     background: var(--color-badge-bg, red);
     color: var(--color-badge-text, white);
     border-radius: var(--radius-round);
-    padding: 0 6px;
     font-size: var(--text-00);
     font-weight: var(--weight-6);
-    line-height: 1.4;
+    line-height: 1;
     margin-left: var(--space-1);
     display: none;
-    min-width: 1.2em;
-    text-align: center;
+    min-width: var(--space-3);
+    height: var(--space-3);
+    padding: 0 0.3em;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    vertical-align: middle;
 }
 
 /* Responsive visibility helpers */

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/components/creative_tree_row.js

@@ -83,6 +83,7 @@ class CreativeTreeRow extends LitElement {
         this._stopAnimation();
       }
     }
+
   }
 
   disconnectedCallback() {

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/app/views/inbox/badge_component/_count.html.erb

@@ -1,5 +1,5 @@
 <% has_comments = count.positive? || show_zero %>
-<% display = has_comments ? 'inline-block' : 'none' %>
+<% display = has_comments ? 'inline-flex' : 'none' %>
 <span id="<%= badge_id %>" class="badge" style="display:<%= display %>" data-count="<%= count %>"
   data-controller="comment-badge" data-comment-badge-has-comments-value="<%= has_comments %>"
 ><%= count if has_comments %></span>

data/lib/collavre/version.rb

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

metadata

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