collavre_slack 0.2.2 → 0.2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 50c834145802449d01365be47375e1d4bbb4a05a2622abee20449d75b24c8c2c
-  data.tar.gz: d7b9d88bad8aac159618cd4f336937aea08e43362c2c2891304a0a895bfd2ece
+  metadata.gz: 13a4005b2d4412089caa83e43e2be4868ce50aa024a77904e7644320d30a5cbb
+  data.tar.gz: c5a8501c5e9149b4648a10dc5eac2ede04451e0474cc0d59119f123b2d6763dd
 SHA512:
-  metadata.gz: b1c34b49e220e6b2cd44e1978f5b3b9fd088d2f18d85f6e8628817486ae7ecf110e2f09a81cf25fb6ea9f6aa4e3a76fcbba61970067a3a5fb866495a82d9050b
-  data.tar.gz: 60b924d455319f87ea3de4ab8a340fb7b93b20df413cb1e96d5e3c78bacb09d94888eda06f0ed08028072e3cae19265b3c88aa5403856147dd0bb7c2766b67cc
+  metadata.gz: 82d93fd5f769a694bb3afc27246b75f161b8f5d50afd9a09e1f1939eb26f5e774c193e9b6a2ce4d04c0ac5faf088c13abb6d693afdd0080463bd4b5ccb1fa463
+  data.tar.gz: 9de647749fb26de533513da779f9726185781071129c28080568402b8f30fb3037694175c7bf91f007f25acc005f07f44fc1186f49d01b15f719409633fe1a2a

data/app/assets/stylesheets/collavre_slack/slack_integration.css

@@ -24,3 +24,36 @@
   background: var(--color-drag-over);
   border-left: 3px solid var(--color-secondary-active);
 }
+
+/* Slack badge in comments popup header */
+.slack-channel-badge {
+  display: none;
+  font-size: 0.7em;
+  font-weight: 600;
+  background: #4A154B;
+  color: white;
+  padding: 0.15em 0.45em;
+  border-radius: 4px;
+  margin-left: 0.5em;
+  cursor: pointer;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.4;
+}
+
+.slack-channel-badge:hover {
+  background: #611f64;
+}
+
+.slack-channel-tooltip {
+  display: none;
+  font-size: 0.75em;
+  color: var(--color-text-secondary);
+  margin-left: 0.4em;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.slack-channel-tooltip.visible {
+  display: inline;
+}

data/app/controllers/collavre_slack/creatives/slack_integrations_controller.rb

@@ -60,6 +60,17 @@ module CollavreSlack
         end
       end
 
+      # Lightweight endpoint for badge display — returns only existing links, no Slack API calls
+      def badge
+        target_creative = @creative.effective_origin
+        links = SlackChannelLink.where(creative: target_creative)
+        render json: {
+          links: links.map { |link|
+            { channel_name: link.channel_name }
+          }
+        }
+      end
+
       def destroy
         link = SlackChannelLink.find(params[:id])
         # Check against origin creative

data/app/javascript/collavre_slack.js

@@ -487,35 +487,79 @@ if (!slackIntegrationInitialized) {
   });
 
   // Slack badge for comments popup
+  // Store references for cleanup to avoid handler accumulation across popup opens
+  let slackBadgeClickHandler = null;
+  let slackDocumentClickHandler = null;
+  let slackBadgeRequestId = 0; // Guard against stale async responses
+
   document.addEventListener('comments-popup:opened', async function (event) {
     const { creativeId, badgeContainer } = event.detail;
     if (!badgeContainer || !creativeId) return;
 
+    // Increment request id to invalidate any in-flight fetch
+    const currentRequestId = ++slackBadgeRequestId;
+
     // Create or find slack badge element
     let badge = badgeContainer.querySelector('[data-slack-badge]');
     if (!badge) {
       badge = document.createElement('span');
       badge.setAttribute('data-slack-badge', '');
       badge.className = 'slack-channel-badge';
-      badge.style.cssText = 'display:none;font-size:0.75em;background:#4A154B;color:white;padding:0.15em 0.5em;border-radius:4px;margin-left:0.5em;';
       badgeContainer.appendChild(badge);
     }
 
+    // Clean up previous handlers before re-registering
+    if (slackBadgeClickHandler) {
+      badge.removeEventListener('click', slackBadgeClickHandler);
+      slackBadgeClickHandler = null;
+    }
+    if (slackDocumentClickHandler) {
+      document.removeEventListener('click', slackDocumentClickHandler);
+      slackDocumentClickHandler = null;
+    }
+
+    // Remove any existing tooltip
+    const existingTooltip = badgeContainer.querySelector('[data-slack-tooltip]');
+    if (existingTooltip) existingTooltip.remove();
+
     // Hide badge initially
     badge.style.display = 'none';
     badge.textContent = '';
 
     try {
-      const response = await fetch(`/slack/creatives/${creativeId}/slack_integrations`, {
+      const response = await fetch(`/slack/creatives/${creativeId}/slack_integrations/badge`, {
         headers: { Accept: 'application/json' }
       });
+
+      // Discard response if a newer popup open has occurred
+      if (currentRequestId !== slackBadgeRequestId) return;
+
       if (!response.ok) return;
 
       const data = await response.json();
       if (data.links && data.links.length > 0) {
-        const channelNames = data.links.map(link => `#${link.channel_name}`).join(', ');
-        badge.textContent = `Slack: ${channelNames}`;
+        badge.textContent = 'Slack';
         badge.style.display = 'inline-block';
+        badge.title = data.links.map(link => `#${link.channel_name}`).join(', ');
+
+        // Create tooltip element for click display
+        const tooltip = document.createElement('span');
+        tooltip.setAttribute('data-slack-tooltip', '');
+        tooltip.className = 'slack-channel-tooltip';
+        tooltip.textContent = data.links.map(link => `#${link.channel_name}`).join(', ');
+        badgeContainer.appendChild(tooltip);
+
+        slackBadgeClickHandler = function (e) {
+          e.stopPropagation();
+          tooltip.classList.toggle('visible');
+        };
+        badge.addEventListener('click', slackBadgeClickHandler);
+
+        // Close tooltip when clicking elsewhere
+        slackDocumentClickHandler = function () {
+          tooltip.classList.remove('visible');
+        };
+        document.addEventListener('click', slackDocumentClickHandler);
       }
     } catch (error) {
       console.warn('Failed to load Slack badge:', error);
@@ -526,10 +570,23 @@ if (!slackIntegrationInitialized) {
     const { badgeContainer } = event.detail;
     if (!badgeContainer) return;
 
+    // Invalidate any in-flight badge fetch so late responses are discarded
+    slackBadgeRequestId++;
+
     const badge = badgeContainer.querySelector('[data-slack-badge]');
     if (badge) {
       badge.style.display = 'none';
       badge.textContent = '';
+      if (slackBadgeClickHandler) {
+        badge.removeEventListener('click', slackBadgeClickHandler);
+        slackBadgeClickHandler = null;
+      }
+    }
+    if (slackDocumentClickHandler) {
+      document.removeEventListener('click', slackDocumentClickHandler);
+      slackDocumentClickHandler = null;
     }
+    const tooltip = badgeContainer.querySelector('[data-slack-tooltip]');
+    if (tooltip) tooltip.remove();
   });
 }

data/config/routes.rb

@@ -3,7 +3,11 @@ CollavreSlack::Engine.routes.draw do
   get "/auth/slack/callback", to: "slack_auth#callback"
 
   resources :creatives, only: [] do
-    resources :slack_integrations, module: :creatives, only: [ :index, :create, :destroy ]
+    resources :slack_integrations, module: :creatives, only: [ :index, :create, :destroy ] do
+      collection do
+        get :badge
+      end
+    end
     resources :slack_messages, only: [ :create ]
   end
 

data/lib/collavre_slack/version.rb

@@ -1,3 +1,3 @@
 module CollavreSlack
-  VERSION = "0.2.2"
+  VERSION = "0.2.3"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: collavre_slack
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.2.3
 platform: ruby
 authors:
 - Collavre