collavre 0.5.0 → 0.7.0

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;
@@ -37,8 +65,10 @@
   margin-right: 0.4em;
 }
 
-#link-creative-modal {
+#link-creative-modal,
+#topic-search-modal {
   min-width: 320px;
+  z-index: calc(var(--layer-modal) + 10);
 }
 
 .common-popup {
@@ -113,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

data/app/controllers/collavre/comments/versions_controller.rb

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+module Collavre
+  module Comments
+    class VersionsController < ApplicationController
+      before_action :set_creative
+      before_action :set_comment
+
+      def index
+        versions = @comment.comment_versions.order(:version_number).map do |v|
+          {
+            id: v.id,
+            version_number: v.version_number,
+            content: v.content,
+            created_at: v.created_at.iso8601
+          }
+        end
+
+        render json: {
+          versions: versions,
+          selected_version_id: @comment.selected_version_id,
+          total: versions.size
+        }
+      end
+
+      def select
+        unless @comment.user == Current.user || @creative.has_permission?(Current.user, :admin)
+          render json: { error: I18n.t("collavre.comments.not_owner") }, status: :forbidden and return
+        end
+
+        version = @comment.comment_versions.find(params[:id])
+        @comment.update!(selected_version_id: version.id, content: version.content)
+
+        render json: { selected_version_id: version.id, content: version.content }
+      end
+
+      def destroy
+        unless @comment.user == Current.user || @creative.has_permission?(Current.user, :admin)
+          render json: { error: I18n.t("collavre.comments.not_owner") }, status: :forbidden and return
+        end
+
+        version = @comment.comment_versions.find(params[:id])
+        was_selected = @comment.selected_version_id == version.id
+        version.destroy!
+
+        if was_selected
+          # Roll back to the latest remaining version
+          latest = @comment.comment_versions.order(:version_number).last
+          if latest
+            @comment.update!(selected_version_id: latest.id, content: latest.content)
+          else
+            @comment.update!(selected_version_id: nil)
+          end
+        end
+
+        remaining = @comment.comment_versions.count
+        render json: {
+          selected_version_id: @comment.selected_version_id,
+          content: @comment.content,
+          total: remaining
+        }
+      end
+
+      private
+
+      def set_creative
+        @creative = Creative.find(params[:creative_id]).effective_origin
+      end
+
+      def set_comment
+        @comment = @creative.comments
+                             .where(
+                               "comments.private = ? OR comments.user_id = ? OR comments.approver_id = ?",
+                               false,
+                               Current.user.id,
+                               Current.user.id
+                             )
+                             .find(params[:comment_id])
+      end
+    end
+  end
+end