collavre 0.5.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9fa2404d51d4e3c83b1c475d2ceb48d2bc834193f825e25cfcb15f5d8dc1a3c7
-  data.tar.gz: 9139d284ca5dd900d79a048b299995558cfbc5dc6acf7324416fac394aa60982
+  metadata.gz: 6414531da275a2a96ac42eec4a925fe11edb59df7c816149519fcd65dae15776
+  data.tar.gz: 2e520883472dd008086893bbd05cb41fd9f9920b64c5daa4850cb9e820a8136a
 SHA512:
-  metadata.gz: 25d88e2068d1810640e9325ed5bcac9d1a07e8452f7843bb646b4d005314bd664f5b0247dbf92036954e688d98f12e9aef65e1ece13d841e07954619e2483339
-  data.tar.gz: 531f7331c316c8d8f1847bbbd6b0dfd386022a968fbdcbf9c0564b1d34b16599fa450841a140bf0619b12df683c3bc8a3cecb8d0b691a242aca3b5efbfcffcb5
+  metadata.gz: 6fe49fbc8ed7aa39949890d6417e4eb9bcf8d00d7499c7876a4b06e71dd7b0273b12e085587ed8ea18b0e43c441f27127d771f08114349f3de0e143f46c5addc
+  data.tar.gz: 79b811c324024e3ab61b9af8aa297f5a7a940cb8983614d2c428b8bbc1e0bf363a1f45c89e9093d9931aa5ccb7490644ee623cc7f4e5d322eace86e8419df7c0

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

@@ -0,0 +1,76 @@
+.comment-version-navigator {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.25rem);
+  margin-top: var(--space-2, 0.25rem);
+  font-size: var(--text-xs, 0.75rem);
+}
+
+.comment-version-btn {
+  background: none;
+  border: 1px solid var(--border-color, #ddd);
+  border-radius: var(--radius-1, 4px);
+  cursor: pointer;
+  padding: 0 var(--space-2, 0.25rem);
+  font-size: var(--text-xs, 0.75rem);
+  line-height: 1.6;
+  color: var(--text-color, #333);
+}
+
+.comment-version-btn:hover:not(:disabled) {
+  background: var(--surface-hover, #f0f0f0);
+}
+
+.comment-version-btn:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.comment-version-indicator {
+  color: var(--text-muted, #888);
+  font-variant-numeric: tabular-nums;
+  min-width: 3em;
+  text-align: center;
+}
+
+.comment-version-delete-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-muted, #888);
+  font-size: var(--text-xs, 0.75rem);
+  padding: 0 var(--space-1, 0.125rem);
+  margin-left: var(--space-1, 0.125rem);
+}
+
+.comment-version-delete-btn:hover {
+  color: var(--danger-color, #e53e3e);
+}
+
+.comment-version-selected {
+  color: var(--primary-color, #4a90d9);
+  font-weight: bold;
+}
+
+.comment-version-select-btn {
+  background: none;
+  border: 1px solid var(--primary-color, #4a90d9);
+  border-radius: var(--radius-1, 4px);
+  cursor: pointer;
+  color: var(--primary-color, #4a90d9);
+  font-size: var(--text-xs, 0.75rem);
+  padding: 0 var(--space-2, 0.25rem);
+  margin-left: var(--space-1, 0.125rem);
+  line-height: 1.6;
+}
+
+.comment-version-select-btn:hover:not(:disabled) {
+  background: var(--primary-color, #4a90d9);
+  color: white;
+}
+
+.comment-version-select-btn:disabled,
+.comment-version-delete-btn:disabled {
+  opacity: 0.3;
+  cursor: default;
+}

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

@@ -1,6 +1,6 @@
 #comments-popup {
     display: none;
-    position: absolute;
+    position: fixed;
     right: 2em;
     /* top: 10em; */
     z-index: var(--layer-modal);
@@ -13,6 +13,8 @@
                 right 0.25s ease, bottom 0.25s ease, border-radius 0.25s ease,
                 box-shadow 0.25s ease, padding 0.25s ease;
     max-width: calc(100vw - 0.5em) !important;
+    overscroll-behavior: contain;
+    overflow: hidden;
 }
 
 body.chat-fullscreen {
@@ -45,6 +47,11 @@ body.chat-fullscreen {
     gap: 0.75em;
 }
 
+.comments-popup-header h3 {
+    margin: 0;
+    line-height: 1.3;
+}
+
 .comments-popup-actions {
     display: inline-flex;
     align-items: center;
@@ -91,6 +98,7 @@ body.chat-fullscreen {
 #comments-list {
     padding-top: 0.5em;
     overflow-y: auto;
+    overscroll-behavior: contain;
     /* height: 380px; */
     flex-grow: 1;
     /* align to vertical bottom */
@@ -138,8 +146,12 @@ body.chat-fullscreen {
 
 #new-comment-form textarea {
     width: 96%;
-    resize: vertical;
+    resize: none;
     font-size: var(--text-1);
+    overflow-y: auto;
+    min-height: calc(var(--text-1) * 1.5 * 2); /* 2 lines minimum */
+    max-height: calc(var(--text-1) * 1.5 * 10); /* 10 lines maximum */
+    transition: height 0.1s ease-out;
     /* Prevent iOS zoom on focus */
 }
 
@@ -196,10 +208,11 @@ body.chat-fullscreen {
     margin-bottom: 0.2em;
 }
 
-.comment-quoted-text {
+.comment-quoted-text,
+.comment-content blockquote {
     border-left: 3px solid var(--color-border);
-    padding: 0.3em 0.6em;
-    margin: 0;
+    padding: 0.2em 0.6em;
+    margin: 0 0 0.3em 0;
     color: var(--color-muted);
     font-size: 0.9em;
     background: color-mix(in srgb, var(--color-section-bg) 50%, transparent);
@@ -208,6 +221,10 @@ body.chat-fullscreen {
     word-break: break-word;
 }
 
+.comment-content blockquote p {
+    margin: 0;
+}
+
 /* Quote indicator in form */
 .comment-quote-indicator {
     display: flex;
@@ -245,6 +262,100 @@ body.chat-fullscreen {
     color: var(--color-text);
 }
 
+/* Review quote chips */
+.review-quotes-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25em;
+    padding: 0.4em 0.5em;
+    max-height: 8em;
+    overflow-y: auto;
+}
+
+.review-quote-chip {
+    display: flex;
+    align-items: center;
+    gap: 0.3em;
+    padding: 0.25em 0.5em;
+    background: color-mix(in srgb, var(--color-section-bg) 50%, transparent);
+    border-left: 3px solid var(--color-muted);
+    border-radius: 0 var(--radius-2) var(--radius-2) 0;
+    font-size: var(--text-0);
+    color: var(--color-muted);
+    line-height: 1.3;
+    transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.review-quote-chip--active {
+    border-left-color: var(--color-active);
+    background: color-mix(in srgb, var(--color-active) 8%, transparent);
+}
+
+.review-quote-type-toggle {
+    border: none;
+    background: none;
+    cursor: pointer;
+    padding: 0 0.1em;
+    font-size: 0.85em;
+    line-height: 1;
+    flex-shrink: 0;
+    opacity: 0.8;
+    transition: opacity 0.15s ease;
+}
+
+.review-quote-type-toggle:hover {
+    opacity: 1;
+}
+
+.review-quote-chip-text {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.review-quote-chip-text:hover {
+    color: var(--color-text);
+}
+
+.review-quote-chip-feedback {
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.85em;
+    color: var(--color-text);
+    opacity: 0.7;
+}
+
+.review-quote-chip-remove {
+    border: none;
+    background: none;
+    cursor: pointer;
+    color: var(--color-muted);
+    font-size: 1em;
+    padding: 0 0.15em;
+    line-height: 1;
+    flex-shrink: 0;
+}
+
+.review-quote-chip-remove:hover {
+    color: var(--color-danger);
+}
+
+.review-submit-btn {
+    font-size: var(--text-0) !important;
+    white-space: nowrap;
+}
+
+.comment-highlight {
+    background: color-mix(in srgb, var(--color-active) 15%, transparent) !important;
+    transition: background 0.3s ease;
+}
+
 /* Review popup (uses common-popup) */
 .comment-review-popup {
     min-width: auto;
@@ -599,7 +710,6 @@ body.chat-fullscreen {
 .delete-comment-btn,
 .edit-comment-btn,
 .review-comment-btn,
-.replace-comment-btn,
 .copy-comment-link-btn {
     border: none;
     background: none;
@@ -614,11 +724,6 @@ body.chat-fullscreen {
     display: none;
 }
 
-.replace-comment-btn:disabled {
-    opacity: 0.35;
-    cursor: default;
-}
-
 .comment-copy-notice {
     position: absolute;
     right: 0.2em;
@@ -798,6 +903,154 @@ body.chat-fullscreen {
     filter: grayscale(1);
 }
 
+/* --- Context Chips --- */
+.comment-contexts-list {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 0.4em;
+    padding: 0.25em 0;
+    overflow-x: auto;
+    overflow-y: visible;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    min-height: 26px; /* Ensure chips (22px + padding) are never clipped */
+}
+
+.comment-contexts-list:empty {
+    display: none;
+}
+
+.comment-contexts-list::-webkit-scrollbar {
+    display: none;
+}
+
+.context-chip {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: var(--space-1);
+    padding: 0.15em 0.5em;
+    border-radius: 10px;
+    background: var(--color-secondary-background);
+    border: 1px solid var(--color-border);
+    color: var(--color-text);
+    font-size: 0.75em;
+    cursor: pointer;
+    transition: all 0.2s;
+    white-space: nowrap;
+    height: 22px;
+    box-sizing: border-box;
+}
+
+.context-chip:hover {
+    background: var(--color-border);
+}
+
+.context-chip.context-disabled {
+    opacity: 0.4;
+    text-decoration: line-through;
+}
+
+.context-chip.context-inherited {
+    border-style: dashed;
+}
+
+.context-chip.context-dragging {
+    opacity: 0.5;
+}
+
+.context-chip.context-drag-over-left {
+    border-left: 3px solid var(--color-active);
+    margin-left: -1px;
+}
+
+.context-chip.context-drag-over-right {
+    border-right: 3px solid var(--color-active);
+    margin-right: -1px;
+}
+
+.context-chip[draggable="true"] {
+    cursor: grab;
+}
+
+.context-chip[draggable="true"]:active {
+    cursor: grabbing;
+}
+
+.navigate-context-btn {
+    background: none;
+    border: none;
+    color: var(--color-text-muted);
+    cursor: pointer;
+    font-size: 0.9em;
+    padding: 0 0.15em;
+    line-height: 1;
+    margin-left: 0.1em;
+}
+
+.navigate-context-btn:hover {
+    color: var(--color-active);
+}
+
+.delete-context-btn {
+    background: none;
+    border: none;
+    color: var(--color-text-muted);
+    cursor: pointer;
+    font-size: 0.9em;
+    padding: 0 0.15em;
+    line-height: 1;
+    margin-left: 0.1em;
+}
+
+.delete-context-btn:hover {
+    color: var(--color-danger);
+}
+
+.add-context-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: var(--color-secondary-background);
+    border: 1px dashed var(--color-border);
+    color: var(--color-text-muted);
+    font-size: 0.85em;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.add-context-btn:hover {
+    background: var(--color-border);
+    color: var(--color-text);
+}
+
+/* Context toggle button in header */
+.context-toggle-btn {
+    font-size: 0.75em;
+    padding: 0.15em 0.4em;
+    border-radius: 8px;
+    background: none;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: all 0.2s;
+    white-space: nowrap;
+}
+
+.context-toggle-btn:hover {
+    background: var(--color-secondary-background);
+}
+
+.context-toggle-btn.context-toggle-active {
+    background: var(--color-secondary-active);
+    color: white;
+    border-color: var(--color-secondary-active);
+}
+
 .comment-topics-list {
     display: flex;
     flex-wrap: nowrap;
@@ -1022,35 +1275,81 @@ body.chat-fullscreen {
     outline: none;
 }
 
-/* Selection hint popup */
-.selection-hint-popup {
-    position: fixed;
+/* Selection action bar */
+.selection-action-bar {
+    position: sticky;
+    bottom: 0;
     background: var(--surface-section);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: var(--space-2) 12px;
-    box-shadow: var(--shadow-2);
-    white-space: nowrap;
-    z-index: 10000;
-    animation: hint-fade-in 0.2s ease-out;
+    border-top: 1px solid var(--border-color);
+    padding: var(--space-2) var(--space-3);
+    z-index: 100;
+    animation: action-bar-slide-up 0.2s ease-out;
 }
 
-.selection-hint-popup .hint-content {
+.selection-action-bar-main {
     display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-    font-size: 0.8em;
+    align-items: center;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+}
+
+.selection-action-bar-count {
+    font-size: 0.85em;
+    font-weight: bold;
+    color: var(--color-text);
+    margin-right: var(--space-1);
+}
+
+.selection-action-bar-btn {
+    border: none;
+    background: none;
+    cursor: pointer;
+    font-size: 0.85em;
+    color: var(--color-chat-btn-text);
+    font-weight: bold;
+    padding: var(--space-1) var(--space-2);
+    border-radius: var(--radius-2);
+    white-space: nowrap;
+}
+
+.selection-action-bar-btn:hover {
+    background: var(--surface-hover, rgba(0, 0, 0, 0.05));
+}
+
+.selection-action-delete:hover {
+    color: var(--color-danger);
+}
+
+.selection-action-bar-close {
+    border: none;
+    background: none;
+    cursor: pointer;
+    font-size: 1em;
     color: var(--text-muted);
+    margin-left: auto;
+    padding: var(--space-1);
 }
 
-.selection-hint-popup .hint-content span {
-    display: block;
+.selection-action-bar-close:hover {
+    color: var(--color-text);
 }
 
-@keyframes hint-fade-in {
+.selection-action-bar-hint {
+    font-size: 0.75em;
+    color: var(--text-muted);
+    margin-top: var(--space-1);
+}
+
+@media (pointer: coarse) {
+    .selection-action-bar-hint.no-touch {
+        display: none;
+    }
+}
+
+@keyframes action-bar-slide-up {
     from {
         opacity: 0;
-        transform: translateY(-4px);
+        transform: translateY(8px);
     }
     to {
         opacity: 1;
@@ -1058,14 +1357,7 @@ body.chat-fullscreen {
     }
 }
 
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-    .selection-hint-popup {
-        background: var(--surface-section);
-        border-color: var(--border-color);
-    }
-}
-
+/* Floating search popups — positioned by CommonPopup inside #comments-popup */
 /* Override popup-close-btn absolute positioning inside comments popup header */
 .comments-popup-actions .popup-close-btn {
   position: static;
@@ -1122,3 +1414,21 @@ body.chat-fullscreen {
     0%, 100% { opacity: 1; }
     50% { opacity: 0; }
 }
+
+.review-hint {
+    background: var(--surface-3, #333);
+    color: var(--text-1, #fff);
+    padding: var(--space-2, 4px) var(--space-3, 8px);
+    border-radius: var(--radius-2, 4px);
+    font-size: var(--text-0, 0.75rem);
+    white-space: nowrap;
+    z-index: var(--layer-important, 999);
+    animation: review-hint-fade 3s ease-out forwards;
+    pointer-events: none;
+    box-shadow: var(--shadow-2, 0 2px 8px rgba(0,0,0,0.15));
+}
+
+@keyframes review-hint-fade {
+    0%, 70% { opacity: 1; }
+    100% { opacity: 0; }
+}

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

@@ -435,7 +435,10 @@ creative-tree-row:not([expanded]) .creative-toggle-btn {
     background-color: var(--border-drag-over);
 }
 
-.creative-row:hover {
+.creative-row:hover,
+.creative-row.level-1:hover,
+.creative-row.level-2:hover,
+.creative-row.level-3:hover {
     background-color: var(--border-color);
 }
 
@@ -606,4 +609,73 @@ creative-tree-row:not([expanded]) .creative-toggle-btn {
 
 .comments-btn .badge[data-count="0"] {
     background: var(--color-brand);
+}
+
+/* Metadata popup styles — mirrors #comments-popup positioning */
+.metadata-popup {
+    position: absolute;
+    right: 2em;
+    z-index: var(--layer-modal);
+    width: 400px;
+    max-width: calc(100vw - 1em);
+    max-height: 60vh;
+    background: var(--surface-bg);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-3);
+    padding: var(--space-3);
+    box-shadow: var(--shadow-3);
+    display: flex;
+    flex-direction: column;
+}
+
+.metadata-popup-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--space-2);
+    font-weight: var(--weight-6);
+    color: var(--text-primary);
+}
+
+.metadata-popup-header button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    font-size: var(--text-3);
+    color: var(--text-muted);
+    padding: 0;
+    line-height: 1;
+}
+
+.metadata-popup-header button:hover {
+    color: var(--text-primary);
+}
+
+#metadata-yaml-editor {
+    flex: 1;
+    width: 100%;
+    min-height: 200px;
+    box-sizing: border-box;
+    font-family: var(--font-mono);
+    font-size: var(--text-0);
+    line-height: var(--leading-2);
+    padding: var(--space-2);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-2);
+    background: var(--surface-input);
+    color: var(--text-primary);
+    resize: vertical;
+}
+
+#metadata-save-btn {
+    margin-top: var(--space-2);
+    align-self: flex-end;
+}
+
+@media (max-width: 768px) {
+    .metadata-popup {
+        right: 0.5em;
+        left: 0.5em;
+        width: auto;
+    }
 }