collavre 0.21.0 → 0.23.0

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

@@ -328,6 +328,13 @@ body.chat-fullscreen {
     margin-top: 0.2em;
 }
 
+.comment-content img,
+.comment-content video {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--radius-2);
+}
+
 .comment-content pre {
     white-space: pre-wrap;
     word-break: break-word;
@@ -360,67 +367,8 @@ body.chat-fullscreen {
     margin: 0;
 }
 
-/* Table styling */
-.comment-content table {
-    border-collapse: collapse;
-    width: 100%;
-    font-size: 0.85em;
-    margin: 0;
-}
-
-.comment-content table th,
-.comment-content table td {
-    border: 1px solid var(--color-border);
-    padding: 0.3em 0.6em;
-    text-align: left;
-    white-space: nowrap;
-}
-
-.comment-content table th {
-    background: var(--color-section-bg);
-    font-weight: 600;
-}
-
-.comment-content table tr:hover td {
-    background: color-mix(in srgb, var(--color-section-bg) 40%, transparent);
-}
-
-/* Table download wrapper */
-.table-download-wrapper {
-    position: relative;
-    overflow-x: auto;
-    margin: 0.4em 0;
-}
-
-.table-download-toolbar {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.3em;
-    padding: 0.15em 0;
-    opacity: 0;
-    transition: opacity 0.15s ease;
-}
-
-.table-download-wrapper:hover .table-download-toolbar {
-    opacity: 1;
-}
-
-.table-download-btn {
-    background: none;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-2);
-    color: var(--color-muted);
-    font-size: 0.75em;
-    padding: 0.15em 0.5em;
-    cursor: pointer;
-    line-height: 1.4;
-    transition: color 0.15s ease, border-color 0.15s ease;
-}
-
-.table-download-btn:hover {
-    color: var(--color-active);
-    border-color: var(--color-active);
-}
+/* Table + download-toolbar styling moved to collavre/tables.css (shared with
+   creative description tables). Load 'collavre/tables' alongside this file. */
 
 /* Quote indicator in form */
 .comment-quote-indicator {
@@ -806,7 +754,8 @@ body.chat-fullscreen {
 }
 
 .edit-comment-action-btn,
-.approve-comment-btn {
+.approve-comment-btn,
+.deny-comment-btn {
     padding: 0.15em 0.4em;
     border-radius: var(--radius-2);
     font-size: 0.75rem;
@@ -836,6 +785,18 @@ body.chat-fullscreen {
     border-color: var(--color-success);
 }
 
+.deny-comment-btn {
+    border: 1px solid color-mix(in srgb, var(--color-danger) 35%, transparent);
+    background: color-mix(in srgb, var(--color-danger) 15%, transparent);
+    color: var(--color-danger);
+}
+
+.deny-comment-btn:hover {
+    background: var(--color-danger);
+    color: var(--text-on-badge);
+    border-color: var(--color-danger);
+}
+
 .comment-status-label {
     margin-left: 0.4em;
     font-size: 0.75em;
@@ -858,6 +819,11 @@ body.chat-fullscreen {
     color: var(--color-complete);
 }
 
+.comment-status-label.denied-label {
+    background-color: color-mix(in srgb, var(--color-danger) 20%, transparent);
+    color: var(--color-danger);
+}
+
 .comment-status-label.pending-label {
     background-color: color-mix(in srgb, var(--color-warning) 20%, transparent);
     color: var(--color-warning);
@@ -1111,6 +1077,34 @@ body.chat-fullscreen {
     gap: var(--space-1);
 }
 
+/* Horizontally-scrollable viewport for channel chips + typing indicator.
+   Keeps PR/Preview badges and live typing on a single line so they never
+   wrap and push the form down. The scroll-prev button stays pinned at the
+   left because it is a flex sibling of (not inside) this viewport.
+   min-width:0 lets this flex child shrink below its content width, which is
+   what actually enables overflow scrolling. */
+#typing-scroll-viewport {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: thin;
+    scroll-behavior: smooth;
+}
+
+#typing-scroll-viewport::-webkit-scrollbar {
+    height: 4px;
+}
+
+#typing-scroll-viewport::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+    border-radius: var(--radius-2);
+}
+
 .scroll-prev-msg-btn {
     background: none;
     border: 1px solid var(--border-color);
@@ -1131,10 +1125,11 @@ body.chat-fullscreen {
 
 #typing-indicator {
     font-style: italic;
-    flex: 1;
+    flex: 0 0 auto;
     min-height: var(--space-px-5);
     display: flex;
     align-items: center;
+    white-space: nowrap;
 }
 
 #typing-indicator .avatar-wrapper {
@@ -1188,7 +1183,8 @@ body.chat-fullscreen {
 #channel-chips-container,
 .channel-chips {
     display: inline-flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    flex-shrink: 0;
     gap: var(--space-1);
     align-items: center;
 }
@@ -1941,3 +1937,112 @@ body.chat-fullscreen {
 li:hover .topic-create-option {
     text-decoration: underline;
 }
+
+/* ── Inline typo correction (volatile overlay; never serialized) ───────────── */
+/* The backdrop mirrors the textarea text exactly and paints <mark> spans over
+   it. The backdrop sits ON TOP of the textarea (higher z-index) but is
+   pointer-events:none, so clicks pass through to the textarea everywhere EXCEPT
+   over a <mark> (pointer-events:auto) — that's what makes the marks clickable.
+   If the textarea were on top, the browser would hit-test it first and the mark
+   click handlers would never fire. The backdrop's text is transparent, so the
+   textarea's real (opaque) glyphs show through and only the underlines paint. */
+.typo-input-wrap {
+    position: relative;
+    display: block;
+}
+
+.typo-input-wrap > textarea {
+    position: relative;
+    background: transparent;
+    z-index: 0;
+}
+
+.typo-backdrop {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.typo-highlights {
+    margin: 0;
+    color: transparent;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    word-break: break-word;
+}
+
+/* Two states, distinguished by BOTH shape and colour (colour-blind safe). */
+.typo-mark {
+    background: transparent;
+    color: transparent;
+    pointer-events: auto;
+    cursor: pointer;
+    border-radius: 2px;
+}
+
+/* Auto-applied (>= threshold): faint straight underline — resolved, dim. */
+.typo-mark-applied {
+    text-decoration: underline solid var(--color-link);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
+    opacity: 0.55;
+}
+
+/* Candidate (< threshold): wavy dotted amber underline — needs a decision. */
+.typo-mark-candidate {
+    text-decoration: underline wavy var(--color-warning);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
+}
+
+/* Creatable combobox reusing CommonPopup positioning. */
+.typo-popup {
+    position: absolute;
+    z-index: 100000;
+    min-width: 180px;
+    max-width: 320px;
+    background: var(--surface-section);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
+    padding: 6px;
+}
+
+.typo-popup-input {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 6px 8px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    font: inherit;
+    margin-bottom: 6px;
+}
+
+.typo-popup-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.typo-popup-list .common-popup-item {
+    padding: 6px 8px;
+    border-radius: 6px;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+}
+
+.typo-popup-list .common-popup-item.active,
+.typo-popup-list .common-popup-item:hover {
+    background: var(--surface-hover);
+}
+
+.typo-popup-role {
+    color: var(--text-muted);
+    font-size: 0.85em;
+}

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

@@ -257,14 +257,23 @@ creative-tree-row.show-edit .creative-row {
     word-break: break-word;
 }
 
-/* Allow attachments and images to be clickable independently of the parent link */
+/* Allow attachments, images, and videos to be interactive independently of the
+   parent link. Without pointer-events on the video, the clickable creative row
+   would swallow clicks on the native playback controls (play/pause/fullscreen). */
 .creative-content a[download],
-.creative-content img {
+.creative-content img,
+.creative-content video {
     pointer-events: auto;
     position: relative;
     z-index: var(--layer-1);
 }
 
+.creative-content video {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--radius-2);
+}
+
 .creative-row:hover .creative-content {
     cursor: pointer;
 }

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

@@ -32,6 +32,17 @@
   to   { opacity: 1; }
 }
 
+/* Top-layer dialogs (alert/confirm/prompt rendered as <dialog>.showModal())
+ * use the native ::backdrop instead of the .modal-dialog-overlay div, so the
+ * backdrop covers everything below — including other top-layer surfaces such
+ * as the image lightbox. Only matches real <dialog> elements; the <div>
+ * consumers of .modal-dialog never get a ::backdrop. */
+dialog.modal-dialog::backdrop {
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
 /* ── Panel ── */
 .modal-dialog {
   display: none;
@@ -180,6 +191,27 @@ textarea.modal-dialog-input {
   opacity: 0.9;
 }
 
+/* Destructive confirm action (delete/unlink). Matches .btn-danger convention. */
+.modal-dialog-btn-danger {
+  background: var(--color-danger);
+  color: var(--text-on-badge);
+  border-color: var(--color-danger);
+}
+
+.modal-dialog-btn-danger:hover {
+  opacity: 0.9;
+}
+
+/* ── Confirm dialog message ──
+ * pre-wrap preserves the \n line breaks that native confirm() honored. */
+.confirm-dialog-message {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  color: var(--text-primary);
+  font-size: var(--text-1);
+  line-height: var(--leading-3, 1.5);
+}
+
 /* ── Footer hints (keyboard shortcuts) ── */
 .modal-dialog-hints {
   display: flex;

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

@@ -396,3 +396,151 @@ a.popup-menu-item:hover {
     min-width: 100%;
   }
 }
+
+/* ── Link-creative picker: mini-tree + flat search results ── */
+.link-creative-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+/* Tree (browse) rows */
+.link-tree-item {
+  list-style: none;
+}
+
+.link-tree-children {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.link-tree-row {
+  display: flex;
+  align-items: center;
+  gap: 0.35em;
+  padding: 0.3em 0.5em;
+  border-radius: var(--radius-1);
+  cursor: pointer;
+}
+
+.link-tree-row:hover,
+.link-tree-row.active {
+  background: var(--surface-hover);
+}
+
+.link-tree-toggle {
+  flex: 0 0 auto;
+  width: 1.75em;
+  height: 1.75em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-1);
+  padding: 0;
+  line-height: 1;
+  color: var(--text-secondary);
+  cursor: pointer;
+  appearance: none;
+}
+
+.link-tree-toggle svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+.link-tree-toggle:hover {
+  color: var(--text-primary);
+  background: var(--surface-hover);
+}
+
+.link-tree-toggle-empty {
+  visibility: hidden;
+  cursor: default;
+}
+
+.link-tree-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-primary);
+}
+
+.link-tree-loading,
+.link-tree-empty,
+.link-popup-message {
+  list-style: none;
+  padding: 0.35em 0.6em;
+  color: var(--text-muted);
+  font-size: var(--text-0);
+}
+
+/* Flat search results with breadcrumb */
+.link-result-item {
+  list-style: none;
+  padding: 0.4em 0.5em;
+  border-radius: var(--radius-1);
+  cursor: pointer;
+}
+
+.link-result-item:hover,
+.link-result-item.active {
+  background: var(--surface-hover);
+}
+
+.link-result-label {
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.link-result-path {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.15em;
+  margin-top: 0.15em;
+  font-size: var(--text-00);
+  color: var(--text-muted);
+}
+
+.link-crumb {
+  background: transparent;
+  border: none;
+  padding: 0 0.1em;
+  font-size: inherit;
+  color: var(--text-muted);
+  cursor: pointer;
+  appearance: none;
+  max-width: 14ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.link-crumb:hover {
+  color: var(--color-link);
+  text-decoration: underline;
+}
+
+.link-crumb-sep {
+  color: var(--text-muted);
+  opacity: 0.6;
+}
+
+.link-crumb-restricted {
+  cursor: default;
+  opacity: 0.6;
+}
+.link-crumb-restricted:hover {
+  color: var(--text-muted);
+  text-decoration: none;
+}

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

@@ -0,0 +1,91 @@
+/*
+ * Shared markdown table styling + CSV/Excel download toolbar.
+ *
+ * Single source of truth so chat-message tables (.comment-content) and creative
+ * description tables (.creative-content / .creative-title-content) render
+ * identically and both expose the same top-right download buttons. The download
+ * toolbar markup is produced by lib/utils/table_download.js.
+ *
+ * Load this wherever either context renders: the creatives index, the slide
+ * layout, and any page that shows the comments popup.
+ */
+
+/* Table styling */
+.comment-content table,
+.creative-content table,
+.creative-title-content table {
+    border-collapse: collapse;
+    width: 100%;
+    font-size: 0.85em;
+    margin: 0;
+    /* Override legacy actiontext.css fixed layout so creative tables expand to
+       content and horizontally scroll like chat tables (tables.css loads after
+       actiontext.css; same specificity, so it must restate this property). */
+    table-layout: auto;
+}
+
+.comment-content table th,
+.comment-content table td,
+.creative-content table th,
+.creative-content table td,
+.creative-title-content table th,
+.creative-title-content table td {
+    border: 1px solid var(--color-border);
+    padding: 0.3em 0.6em;
+    text-align: left;
+    white-space: nowrap;
+    /* Clear actiontext.css cell floors so creative cells size to content like
+       chat cells instead of forcing a min width / breaking long words. */
+    min-width: 0;
+    word-break: normal;
+}
+
+.comment-content table th,
+.creative-content table th,
+.creative-title-content table th {
+    background: var(--color-section-bg);
+    font-weight: 600;
+}
+
+.comment-content table tr:hover td,
+.creative-content table tr:hover td,
+.creative-title-content table tr:hover td {
+    background: color-mix(in srgb, var(--color-section-bg) 40%, transparent);
+}
+
+/* Table download wrapper */
+.table-download-wrapper {
+    position: relative;
+    overflow-x: auto;
+    margin: 0.4em 0;
+}
+
+.table-download-toolbar {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.3em;
+    padding: 0.15em 0;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+}
+
+.table-download-wrapper:hover .table-download-toolbar {
+    opacity: 1;
+}
+
+.table-download-btn {
+    background: none;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-2);
+    color: var(--color-muted);
+    font-size: 0.75em;
+    padding: 0.15em 0.5em;
+    cursor: pointer;
+    line-height: 1.4;
+    transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.table-download-btn:hover {
+    color: var(--color-active);
+    border-color: var(--color-active);
+}