collavre 0.6.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 88ee0fe394fdf6b52cb501be92fbac6b05e549adf30aa46937d7e9a14a690e7c
-  data.tar.gz: e3573f4001310e3227e6084f5544af98412ba341d217cec06731974d57fc154d
+  metadata.gz: 6414531da275a2a96ac42eec4a925fe11edb59df7c816149519fcd65dae15776
+  data.tar.gz: 2e520883472dd008086893bbd05cb41fd9f9920b64c5daa4850cb9e820a8136a
 SHA512:
-  metadata.gz: a139147e03c807d07ab876d053172acfb736956fb5d6a8e1d519a070b83913caba150389153329461963129394b52af20cbd53b7e0506a68f5c4210dc6625cc2
-  data.tar.gz: f9f2ea3a2921c3baee34452e8908cd48e93b59692124b54b672312255eb8a25eb77f8b3dad61f3ce17e6533f9d79e7b11ce7bd928dfcc74ea336dc30329204b0
+  metadata.gz: 6fe49fbc8ed7aa39949890d6417e4eb9bcf8d00d7499c7876a4b06e71dd7b0273b12e085587ed8ea18b0e43c441f27127d771f08114349f3de0e143f46c5addc
+  data.tar.gz: 79b811c324024e3ab61b9af8aa297f5a7a940cb8983614d2c428b8bbc1e0bf363a1f45c89e9093d9931aa5ccb7490644ee623cc7f4e5d322eace86e8419df7c0

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 */
@@ -895,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;

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

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

@@ -0,0 +1,319 @@
+.org-chart-tree {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+}
+
+.org-chart-group {
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-2);
+    overflow: hidden;
+}
+
+.org-chart-group .org-chart-group {
+    border: none;
+    border-top: 1px solid var(--border-color);
+    border-radius: 0;
+}
+
+.org-chart-creative-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    background-color: var(--surface-section);
+    cursor: pointer;
+    list-style: none;
+    user-select: none;
+}
+
+.org-chart-creative-row::-webkit-details-marker {
+    display: none;
+}
+
+.org-chart-creative-row::before {
+    content: '▶';
+    font-size: 0.7em;
+    color: var(--text-muted);
+    transition: transform 0.15s ease;
+    flex-shrink: 0;
+}
+
+details[open] > .org-chart-creative-row::before {
+    transform: rotate(90deg);
+}
+
+.org-chart-creative-row {
+    --depth: 0;
+    padding-left: calc(var(--space-5) * var(--depth));
+}
+
+.org-chart-depth-0 {
+    background-color: var(--surface-section);
+    font-weight: var(--weight-6);
+}
+
+.org-chart-creative-row:not(.org-chart-depth-0) {
+    background-color: transparent;
+    font-weight: var(--weight-4);
+    font-size: max(0.85em, 1em - var(--depth) * 0.05em);
+}
+
+.org-chart-creative-link {
+    color: var(--text-primary);
+    text-decoration: none;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.org-chart-creative-link:hover {
+    color: var(--color-link);
+}
+
+.org-chart-owner-badge {
+    font-size: var(--text-0);
+    color: var(--text-muted);
+    padding: 2px 6px;
+    border-radius: var(--radius-1);
+    background-color: var(--surface-input);
+    white-space: nowrap;
+}
+
+/* Manage permissions button on creative row */
+.org-chart-manage-btn {
+    margin-left: auto;
+}
+
+.org-chart-content {
+    border-top: 1px solid var(--border-color);
+}
+
+.org-chart-members {
+    padding: var(--space-1) 0;
+}
+
+.org-chart-members,
+.org-chart-children,
+.org-chart-no-members {
+    --indent: 0;
+}
+
+.org-chart-members .org-chart-member-row,
+.org-chart-no-members {
+    padding-left: calc(var(--space-5) * (var(--indent) + 1) + var(--space-4));
+}
+
+.org-chart-toolbar {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: var(--space-2);
+}
+
+.org-chart-children {
+    padding: 0;
+}
+
+/* Grid layout for column alignment */
+.org-chart-member-row {
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    align-items: center;
+    padding: var(--space-1) var(--space-3);
+    gap: var(--space-3);
+}
+
+.org-chart-member-row:hover {
+    background-color: var(--surface-input);
+}
+
+/* Column 1: User info (avatar + name + email) */
+.org-chart-member-info {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    min-width: 0;
+}
+
+.org-chart-member-name-group {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-2);
+    min-width: 0;
+    overflow: hidden;
+}
+
+.org-chart-member-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--text-primary);
+    text-decoration: none;
+    font-weight: var(--weight-5);
+}
+
+.org-chart-member-name:hover {
+    color: var(--color-link);
+}
+
+.org-chart-member-email {
+    font-size: var(--text-0);
+    color: var(--text-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Column 2: Permission badge/select */
+.org-chart-member-permission {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 80px;
+}
+
+/* Column 3: Actions */
+.org-chart-member-actions {
+    display: flex;
+    gap: var(--space-1);
+    justify-content: flex-end;
+    min-width: 120px;
+}
+
+/* Permission badges */
+.org-chart-permission-badge {
+    font-size: var(--text-0);
+    padding: 2px 8px;
+    border-radius: var(--radius-round);
+    white-space: nowrap;
+}
+
+.org-chart-permission-admin {
+    background-color: var(--color-danger);
+    color: white;
+}
+
+.org-chart-permission-write {
+    background-color: var(--color-success);
+    color: white;
+}
+
+.org-chart-permission-feedback {
+    background-color: var(--color-warning);
+    color: var(--text-primary);
+}
+
+.org-chart-permission-read {
+    background-color: var(--text-muted);
+    color: white;
+}
+
+.org-chart-permission-no_access {
+    background-color: var(--surface-input);
+    color: var(--text-muted);
+}
+
+/* Share direction labels */
+.org-chart-direction {
+    font-size: var(--text-0);
+    white-space: nowrap;
+}
+
+.org-chart-direction-outgoing {
+    color: var(--color-brand);
+}
+
+.org-chart-direction-incoming {
+    color: var(--color-warning);
+}
+
+/* Permission select dropdown */
+.org-chart-permission-select {
+    font-size: var(--text-0);
+    padding: 2px 6px;
+    border-radius: var(--radius-round);
+    border: 1px solid transparent;
+    cursor: pointer;
+    appearance: auto;
+    white-space: nowrap;
+}
+
+.org-chart-permission-select.org-chart-permission-admin {
+    background-color: var(--color-danger);
+    color: white;
+}
+
+.org-chart-permission-select.org-chart-permission-write {
+    background-color: var(--color-success);
+    color: white;
+}
+
+.org-chart-permission-select.org-chart-permission-feedback {
+    background-color: var(--color-warning);
+    color: var(--text-primary);
+}
+
+.org-chart-permission-select.org-chart-permission-read {
+    background-color: var(--text-muted);
+    color: white;
+}
+
+.org-chart-permission-select.org-chart-permission-no_access {
+    background-color: var(--surface-input);
+    color: var(--text-muted);
+}
+
+.org-chart-no-members {
+    color: var(--text-muted);
+    font-size: var(--text-0);
+    padding: var(--space-1) var(--space-5);
+    margin: 0;
+}
+
+/* Horizontal scroll instead of wrapping */
+.org-chart-members {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.org-chart-member-row {
+    min-width: max-content;
+}
+
+/* Pending invitation styles */
+.org-chart-pending-badge {
+    font-size: var(--text-00);
+    color: var(--color-warning);
+    font-weight: var(--weight-5);
+}
+
+.org-chart-invitation-row {
+    opacity: 0.85;
+}
+
+/* Unassigned users section */
+.org-chart-unassigned {
+    margin-top: var(--space-4);
+    border-top: 1px solid var(--color-border);
+    padding-top: var(--space-3);
+}
+
+.org-chart-unassigned-title {
+    font-size: var(--text-1);
+    font-weight: var(--weight-5);
+    color: var(--text-muted);
+    margin-bottom: var(--space-2);
+}
+
+/* View switcher */
+.contacts-view-switcher {
+    display: flex;
+    gap: var(--space-2);
+    margin-bottom: var(--space-3);
+}
+
+.contacts-description {
+    margin: 0 0 var(--space-2) 0;
+}

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

@@ -20,6 +20,34 @@
   overflow-y: auto;
 }
 
+/* Ensure autocomplete popup inside share modal works without mention_menu.css */
+#share-creative-modal .common-popup {
+  position: absolute;
+  z-index: var(--layer-modal, 100);
+  background: var(--surface-section, #fff);
+  border: 1px solid var(--border-color, #ddd);
+  box-shadow: var(--shadow-2, 0 2px 8px rgba(0,0,0,.15));
+  border-radius: 6px;
+  padding: 0.35em;
+  max-width: min(420px, 90vw);
+}
+#share-creative-modal .common-popup ul,
+#share-creative-modal .common-popup-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-height: 260px;
+  overflow-y: auto;
+}
+#share-creative-modal .common-popup-list li {
+  list-style: none;
+  padding: 0.35em 0.5em;
+  cursor: pointer;
+}
+#share-creative-modal .common-popup-list li:hover {
+  background: var(--border-drag-over, #f0f0f0);
+}
+
 .share-grid {
   list-style: none;
   padding: 0;
@@ -115,6 +143,43 @@
   color: var(--danger);
 }
 
+.share-modal-message {
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-2);
+  margin-bottom: var(--space-3);
+  font-size: var(--text-0);
+  animation: share-modal-message-fade 4s ease-in-out;
+}
+.share-modal-message-success {
+  background: var(--success-bg, #d4edda);
+  color: var(--success-text, #155724);
+  border: 1px solid var(--success-border, #c3e6cb);
+}
+.share-modal-message-error {
+  background: var(--danger-bg, #f8d7da);
+  color: var(--danger-text, #721c24);
+  border: 1px solid var(--danger-border, #f5c6cb);
+}
+@keyframes share-modal-message-fade {
+  0%, 80% { opacity: 1; }
+  100% { opacity: 0; }
+}
+.share-modal-pending {
+  opacity: 0.6;
+}
+.share-modal-spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--text-muted, #999);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: share-spinner 0.6s linear infinite;
+}
+@keyframes share-spinner {
+  to { transform: rotate(360deg); }
+}
+
 #github-integration-modal .github-modal-status {
   color: var(--text-muted);
   margin-bottom: 1em;

data/app/controllers/collavre/application_controller.rb

@@ -2,8 +2,21 @@ module Collavre
   class ApplicationController < ::ApplicationController
     protect_from_forgery with: :exception
 
+    # Include a fresh CSRF token in every response header so that
+    # JavaScript callers can update the stale <meta> tag after the
+    # browser has been in the background (OS window switch, tab
+    # freeze, etc.).  Without this, the meta-tag token drifts out
+    # of sync with the session cookie and POSTs fail with 422.
+    after_action :set_csrf_token_header
+
     private
 
+    def set_csrf_token_header
+      return unless protect_against_forgery?
+
+      response.headers["X-CSRF-Token"] = form_authenticity_token
+    end
+
     # Helper to get the engine's routes
     def collavre_engine
       Collavre::Engine.routes.url_helpers