collavre 0.22.0 → 0.24.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 {
@@ -1768,6 +1716,46 @@ body.chat-fullscreen {
     opacity: 0.5;
     font-style: italic;
 }
+
+/* Topic list popup button (pinned right of the scrolling tab bar) */
+.comment-topics-bar {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+}
+.comment-topics-bar .comment-topics-list {
+    flex: 1;
+    min-width: 0;
+}
+.topic-list-btn {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: var(--radius-3);
+    border: 1px solid var(--color-border);
+    background: transparent;
+    cursor: pointer;
+    color: var(--color-muted);
+    padding: 0;
+}
+.topic-list-btn:hover {
+    background: var(--color-section-bg);
+    color: var(--color-text);
+}
+
+/* Archived entries inside the topic list popup */
+.topic-list-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3em;
+}
+.topic-list-item--archived {
+    opacity: 0.5;
+    font-style: italic;
+}
 .topic-branch-icon {
     font-size: 0.75em;
     opacity: 0.6;
@@ -1989,3 +1977,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/landing.css

@@ -94,6 +94,18 @@
   z-index: 0;
 }
 
+.landing-hero-eyebrow {                 /* L4 — category line, above the claim */
+  font-size: var(--text-2);
+  font-weight: var(--weight-6);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-active);
+  margin: 0 auto var(--space-4);
+  text-align: center;
+  position: relative;
+  z-index: 1;
+}
+
 .landing-hero-title {                   /* L1 — main headline */
   font-size: var(--text-7);
   font-weight: var(--weight-8);
@@ -117,6 +129,17 @@
   z-index: 1;
 }
 
+.landing-hero-tagline {                 /* L4 — the mechanism, one line */
+  font-size: var(--text-2);
+  color: var(--text-muted);
+  margin: 0 auto var(--space-6);
+  max-width: 720px;
+  text-align: center;
+  line-height: var(--leading-2);
+  position: relative;
+  z-index: 1;
+}
+
 .landing-hero-brand {                   /* L1 — "콜라브" in brand color */
   font-size: var(--text-7);
   font-weight: var(--weight-8);
@@ -238,6 +261,7 @@
   background: var(--surface-section);
 }
 
+/* Three tools, three cards — one row on desktop. */
 .landing-problem-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
@@ -258,6 +282,12 @@
   border-color: var(--text-muted);
 }
 
+/* The fourth card is the punchline — the copy the AI era added. */
+.landing-problem-card-accent {
+  border-color: var(--color-active);
+  background: color-mix(in srgb, var(--color-active) 6%, var(--surface-bg));
+}
+
 .landing-problem-icon {
   font-size: var(--text-5);             /* L2 — emoji decorative */
   display: block;
@@ -432,6 +462,68 @@ body.dark-mode .landing-demo-dark { display: block; }
   body:not(.light-mode) .landing-demo-dark { display: block; }
 }
 
+/* ─── Interface: the product still ─────────────────────────────────────────── */
+.landing-shot-frame {
+  max-width: 980px;
+  margin: 0 auto;
+  border-radius: var(--radius-4);
+  border: var(--border-1) solid var(--border-color);
+  background: var(--surface-section);
+  overflow: hidden;
+  box-shadow: var(--shadow-3);
+}
+
+.landing-shot-img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+/* Same light/dark pairing the demo video uses: the screenshot is app chrome, so a
+   light shot on a dark page reads as a bug, not as a screenshot. */
+.landing-shot-dark { display: none; }
+
+body.dark-mode .landing-shot-light { display: none; }
+body.dark-mode .landing-shot-dark { display: block; }
+
+@media (prefers-color-scheme: dark) {
+  body:not(.light-mode) .landing-shot-light { display: none; }
+  body:not(.light-mode) .landing-shot-dark { display: block; }
+}
+
+.landing-interface-points {
+  list-style: none;
+  padding: 0;
+  margin: var(--space-5) auto 0;
+  max-width: 980px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-3) var(--space-5);
+}
+
+.landing-interface-points li {
+  position: relative;
+  padding-left: var(--space-4);
+  font-size: var(--text-2);
+  color: var(--text-muted);
+  line-height: var(--leading-2);
+}
+
+.landing-interface-points li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0.6em;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--color-accent, var(--text-muted));
+}
+
+@media (max-width: 780px) {
+  .landing-interface-points { grid-template-columns: 1fr; }
+}
+
 /* ─── Responsive ────────────────────────────────────────────────────────────── */
 @media (max-width: 640px) {
   .landing-container {

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

@@ -81,14 +81,16 @@
 }
 
 #link-creative-modal,
-#topic-search-modal {
+#topic-search-modal,
+#topic-list-modal {
   min-width: 320px;
   z-index: calc(var(--layer-modal) + 10);
 }
 
 /* When chat is fullscreen, these modals must sit above it */
 body.chat-fullscreen #link-creative-modal,
-body.chat-fullscreen #topic-search-modal {
+body.chat-fullscreen #topic-search-modal,
+body.chat-fullscreen #topic-list-modal {
   z-index: calc(var(--layer-fullscreen) + 1);
 }
 

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);
+}

data/app/channels/collavre/inbox_badge_channel.rb

@@ -0,0 +1,30 @@
+module Collavre
+  # Keeps the global inbox badge in sync without a full page reload.
+  #
+  # The badge is updated in real time by fire-and-forget Turbo Stream
+  # broadcasts on the ["inbox", user] stream (see Comment::Broadcastable).
+  # ActionCable does not replay messages missed while a socket is down, so any
+  # badge update broadcast during a WebSocket gap (Turbo navigation, sleep/wake,
+  # network blip, server restart, the window before the cable connects) was lost
+  # until the next full page render — the "badge only shows up after refresh" bug.
+  #
+  # This channel closes that gap with the established pull-on-subscribe pattern:
+  # ActionCable re-runs #subscribed on every (re)connect, so we re-push the
+  # authoritative count each time. No client polling, no time window — the server
+  # self-heals the count on reconnect.
+  class InboxBadgeChannel < ApplicationCable::Channel
+    def subscribed
+      return reject unless current_user
+
+      # Deliver the snapshot through THIS subscription (transmit), not by
+      # re-broadcasting to the sibling ["inbox", user] Turbo stream. On reconnect
+      # the two subscriptions re-attach independently, so a broadcast from here
+      # could fire before that stream re-attaches and be dropped — leaving the
+      # badge stale. transmit only reaches this just-confirmed subscriber, so the
+      # snapshot can never be sent while no client is listening.
+      inbox = Creative.inbox_for(current_user)
+      snapshot = Comment.inbox_badge_turbo_stream(inbox, current_user)
+      transmit(snapshot) if snapshot
+    end
+  end
+end