@in-the-loop-labs/pair-review 1.0.0

package/public/js/components/SplitButton.js

@@ -0,0 +1,382 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+/**
+ * Split Button Component
+ * A button with a main action area and a dropdown menu for additional actions
+ */
+class SplitButton {
+  // localStorage key for persisting default action preference
+  static STORAGE_KEY = 'pair-review-split-button-default-action';
+
+  constructor(options = {}) {
+    this.container = null;
+    this.dropdown = null;
+    this.isOpen = false;
+    this.commentCount = 0;
+    // In local mode, default to preview since submit is hidden
+    const isLocalMode = window.PAIR_REVIEW_LOCAL_MODE === true;
+    this.hideSubmit = isLocalMode || options.hideSubmit === true;
+
+    // Determine default action: local mode always uses preview,
+    // otherwise check localStorage for saved preference
+    if (isLocalMode) {
+      this.defaultAction = 'preview';
+    } else {
+      const savedAction = this.loadSavedAction();
+      this.defaultAction = savedAction || options.defaultAction || 'submit';
+    }
+    this.onSubmit = options.onSubmit || (() => {});
+    this.onPreview = options.onPreview || (() => {});
+    this.onClear = options.onClear || (() => {});
+    this.onSetDefault = options.onSetDefault || (() => {});
+
+    // Bind methods
+    this.handleMainClick = this.handleMainClick.bind(this);
+    this.handleDropdownClick = this.handleDropdownClick.bind(this);
+    this.handleOutsideClick = this.handleOutsideClick.bind(this);
+    this.handleMenuItemClick = this.handleMenuItemClick.bind(this);
+  }
+
+  /**
+   * Create and return the split button element
+   * @returns {HTMLElement} The split button container element
+   */
+  render() {
+    // Create container
+    this.container = document.createElement('div');
+    this.container.className = 'split-button-container';
+    this.container.id = 'comment-split-button';
+
+    // Create main button
+    const mainButton = document.createElement('button');
+    mainButton.className = 'split-button-main';
+    mainButton.id = 'split-button-main';
+    mainButton.type = 'button';
+    mainButton.addEventListener('click', this.handleMainClick);
+
+    // Create button text span
+    const buttonText = document.createElement('span');
+    buttonText.className = 'split-button-text';
+    buttonText.id = 'split-button-text';
+    buttonText.textContent = this.getButtonText();
+    mainButton.appendChild(buttonText);
+
+    // Create dropdown toggle button
+    const dropdownToggle = document.createElement('button');
+    dropdownToggle.className = 'split-button-dropdown-toggle';
+    dropdownToggle.id = 'split-button-dropdown-toggle';
+    dropdownToggle.type = 'button';
+    dropdownToggle.setAttribute('aria-label', 'Open comment actions menu');
+    dropdownToggle.setAttribute('aria-haspopup', 'true');
+    dropdownToggle.setAttribute('aria-expanded', 'false');
+    dropdownToggle.addEventListener('click', this.handleDropdownClick);
+
+    // Add dropdown arrow icon
+    dropdownToggle.innerHTML = `
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z"/>
+      </svg>
+    `;
+
+    // Create dropdown menu
+    this.dropdown = document.createElement('div');
+    this.dropdown.className = 'split-button-dropdown';
+    this.dropdown.id = 'split-button-dropdown';
+    this.dropdown.setAttribute('role', 'menu');
+    this.dropdown.style.display = 'none';
+
+    this.updateDropdownMenu();
+
+    // Assemble the split button
+    this.container.appendChild(mainButton);
+    this.container.appendChild(dropdownToggle);
+    this.container.appendChild(this.dropdown);
+
+    return this.container;
+  }
+
+  /**
+   * Update the dropdown menu items based on current state
+   */
+  updateDropdownMenu() {
+    if (!this.dropdown) return;
+
+    const isSubmitDefault = this.defaultAction === 'submit';
+    const isPreviewDefault = this.defaultAction === 'preview';
+
+    // Build menu items - conditionally include Submit Review
+    let menuItems = '';
+
+    if (!this.hideSubmit) {
+      menuItems += `
+      <button class="split-button-menu-item" data-action="submit" role="menuitem">
+        <span class="menu-item-check">${isSubmitDefault ? '&#10003;' : ''}</span>
+        <span class="menu-item-text">Submit Review</span>
+      </button>`;
+    }
+
+    menuItems += `
+      <button class="split-button-menu-item" data-action="preview" role="menuitem">
+        <span class="menu-item-check">${isPreviewDefault ? '&#10003;' : ''}</span>
+        <span class="menu-item-text">Preview</span>
+      </button>
+      <div class="split-button-menu-separator"></div>
+      <button class="split-button-menu-item split-button-menu-item-danger" data-action="clear" role="menuitem" ${this.commentCount === 0 ? 'disabled' : ''}>
+        <span class="menu-item-check"></span>
+        <span class="menu-item-text">Clear All</span>
+      </button>
+    `;
+
+    this.dropdown.innerHTML = menuItems;
+
+    // Add click handlers to menu items
+    this.dropdown.querySelectorAll('.split-button-menu-item').forEach(item => {
+      item.addEventListener('click', this.handleMenuItemClick);
+    });
+  }
+
+  /**
+   * Handle click on the main button area
+   */
+  handleMainClick() {
+    if (this.defaultAction === 'submit') {
+      this.onSubmit();
+    } else {
+      this.onPreview();
+    }
+  }
+
+  /**
+   * Handle click on the dropdown toggle
+   * @param {Event} event - Click event
+   */
+  handleDropdownClick(event) {
+    event.stopPropagation();
+    this.toggleDropdown();
+  }
+
+  /**
+   * Handle click on a menu item
+   * @param {Event} event - Click event
+   */
+  handleMenuItemClick(event) {
+    const button = event.currentTarget;
+    if (button.disabled) return;
+
+    const action = button.dataset.action;
+
+    switch (action) {
+      case 'submit':
+        if (this.defaultAction !== 'submit') {
+          this.setDefaultAction('submit');
+        }
+        this.onSubmit();
+        break;
+      case 'preview':
+        if (this.defaultAction !== 'preview') {
+          this.setDefaultAction('preview');
+        }
+        this.onPreview();
+        break;
+      case 'clear':
+        this.onClear();
+        break;
+    }
+
+    this.closeDropdown();
+  }
+
+  /**
+   * Toggle dropdown open/close state
+   */
+  toggleDropdown() {
+    if (this.isOpen) {
+      this.closeDropdown();
+    } else {
+      this.openDropdown();
+    }
+  }
+
+  /**
+   * Open the dropdown menu
+   */
+  openDropdown() {
+    if (!this.dropdown) return;
+
+    this.isOpen = true;
+    this.dropdown.style.display = 'block';
+
+    const toggleButton = this.container?.querySelector('#split-button-dropdown-toggle');
+    if (toggleButton) {
+      toggleButton.setAttribute('aria-expanded', 'true');
+    }
+
+    this.container?.classList.add('split-button-open');
+
+    // Add outside click listener
+    setTimeout(() => {
+      document.addEventListener('click', this.handleOutsideClick);
+    }, 0);
+  }
+
+  /**
+   * Close the dropdown menu
+   */
+  closeDropdown() {
+    if (!this.dropdown) return;
+
+    this.isOpen = false;
+    this.dropdown.style.display = 'none';
+
+    const toggleButton = this.container?.querySelector('#split-button-dropdown-toggle');
+    if (toggleButton) {
+      toggleButton.setAttribute('aria-expanded', 'false');
+    }
+
+    this.container?.classList.remove('split-button-open');
+
+    // Remove outside click listener
+    document.removeEventListener('click', this.handleOutsideClick);
+  }
+
+  /**
+   * Handle clicks outside the dropdown to close it
+   * @param {Event} event - Click event
+   */
+  handleOutsideClick(event) {
+    if (this.container && !this.container.contains(event.target)) {
+      this.closeDropdown();
+    }
+  }
+
+  /**
+   * Set the default action for the main button
+   * @param {string} action - 'submit' or 'preview'
+   */
+  setDefaultAction(action) {
+    if (action !== 'submit' && action !== 'preview') return;
+
+    // In local mode (hideSubmit), don't allow setting submit as default
+    if (this.hideSubmit && action === 'submit') {
+      action = 'preview';
+    }
+
+    this.defaultAction = action;
+    this.updateDropdownMenu();
+    this.updateButtonText();
+    this.onSetDefault(action);
+
+    // Persist to localStorage (only in PR mode where submit is available)
+    if (!this.hideSubmit) {
+      this.saveAction(action);
+    }
+  }
+
+  /**
+   * Load saved action preference from localStorage
+   * @returns {string|null} Saved action or null if not found
+   */
+  loadSavedAction() {
+    try {
+      const saved = localStorage.getItem(SplitButton.STORAGE_KEY);
+      if (saved === 'submit' || saved === 'preview') {
+        return saved;
+      }
+    } catch {
+      // localStorage may be unavailable (private browsing, etc.)
+    }
+    return null;
+  }
+
+  /**
+   * Save action preference to localStorage
+   * @param {string} action - 'submit' or 'preview'
+   */
+  saveAction(action) {
+    try {
+      localStorage.setItem(SplitButton.STORAGE_KEY, action);
+    } catch {
+      // localStorage may be unavailable (private browsing, etc.)
+    }
+  }
+
+  /**
+   * Get the button text based on default action and comment count
+   * @returns {string} Button text
+   */
+  getButtonText() {
+    const actionText = this.defaultAction === 'submit' ? 'Submit Review' : 'Preview';
+    if (this.commentCount > 0) {
+      return `${actionText} (${this.commentCount})`;
+    }
+    return actionText;
+  }
+
+  /**
+   * Update the button text display
+   */
+  updateButtonText() {
+    const textSpan = this.container?.querySelector('#split-button-text');
+    if (textSpan) {
+      textSpan.textContent = this.getButtonText();
+    }
+  }
+
+  /**
+   * Update the comment count display
+   * @param {number} count - Number of comments
+   */
+  updateCommentCount(count) {
+    this.commentCount = count;
+    this.updateButtonText();
+
+    // Update button styling based on count
+    const mainButton = this.container?.querySelector('#split-button-main');
+    const dropdownToggle = this.container?.querySelector('#split-button-dropdown-toggle');
+
+    if (mainButton) {
+      if (count > 0) {
+        mainButton.classList.add('has-comments');
+      } else {
+        mainButton.classList.remove('has-comments');
+      }
+    }
+
+    if (dropdownToggle) {
+      if (count > 0) {
+        dropdownToggle.classList.add('has-comments');
+      } else {
+        dropdownToggle.classList.remove('has-comments');
+      }
+    }
+
+    // Update the Clear All menu item disabled state
+    this.updateDropdownMenu();
+  }
+
+  /**
+   * Get the current comment count
+   * @returns {number} Current comment count
+   */
+  getCommentCount() {
+    return this.commentCount;
+  }
+
+  /**
+   * Destroy the component and clean up event listeners
+   */
+  destroy() {
+    document.removeEventListener('click', this.handleOutsideClick);
+
+    if (this.container) {
+      this.container.remove();
+      this.container = null;
+    }
+
+    this.dropdown = null;
+  }
+}
+
+// Export for use in other modules
+if (typeof window !== 'undefined') {
+  window.SplitButton = SplitButton;
+}

package/public/js/components/StatusIndicator.js

@@ -0,0 +1,265 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+/**
+ * Status Indicator Component
+ * Shows AI analysis status in the toolbar when running in background
+ */
+class StatusIndicator {
+  constructor() {
+    this.indicator = null;
+    this.currentAnalysisId = null;
+    this.animationDots = 0;
+    this.dotsInterval = null;
+    
+    this.createIndicator();
+  }
+
+  /**
+   * Create the status indicator DOM structure
+   */
+  createIndicator() {
+    // Remove existing indicator if it exists
+    const existing = document.getElementById('status-indicator');
+    if (existing) {
+      existing.remove();
+    }
+
+    // Create status indicator element
+    const indicator = document.createElement('div');
+    indicator.id = 'status-indicator';
+    indicator.className = 'status-indicator';
+    indicator.style.display = 'none';
+    
+    indicator.innerHTML = `
+      <div class="status-content" onclick="statusIndicator.reopenModal()">
+        <span class="status-icon">
+          <svg class="spinner" width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M8 0a8 8 0 0 0-8 8h2a6 6 0 0 1 6-6V0z"/>
+          </svg>
+        </span>
+        <span class="status-text">AI analyzing</span>
+        <span class="status-dots">...</span>
+      </div>
+      <button class="status-close" onclick="statusIndicator.hide()" title="Dismiss">
+        <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+          <path d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"/>
+        </svg>
+      </button>
+    `;
+
+    // Insert indicator into the PR actions area
+    const prActions = document.querySelector('.pr-actions');
+    if (prActions) {
+      // Insert before the first button (theme toggle)
+      const firstButton = prActions.querySelector('button');
+      if (firstButton) {
+        prActions.insertBefore(indicator, firstButton);
+      } else {
+        prActions.appendChild(indicator);
+      }
+    } else {
+      // Fallback: append to body
+      document.body.appendChild(indicator);
+    }
+
+    this.indicator = indicator;
+  }
+
+  /**
+   * Show the status indicator
+   * @param {string} analysisId - Analysis ID being tracked
+   * @param {string} text - Initial status text
+   */
+  show(analysisId, text = 'AI analyzing') {
+    if (!this.indicator) {
+      this.createIndicator();
+    }
+
+    this.currentAnalysisId = analysisId;
+    this.indicator.style.display = 'flex';
+    
+    // Set initial state
+    this.updateText(text);
+    this.showSpinner();
+    this.startDotsAnimation();
+  }
+
+  /**
+   * Hide the status indicator
+   */
+  hide() {
+    if (this.indicator) {
+      this.indicator.style.display = 'none';
+    }
+    this.stopDotsAnimation();
+    this.currentAnalysisId = null;
+  }
+
+  /**
+   * Update status text
+   * @param {string} text - New status text
+   */
+  updateText(text) {
+    const statusText = this.indicator?.querySelector('.status-text');
+    if (statusText) {
+      statusText.textContent = text;
+    }
+  }
+
+  /**
+   * Show completion state
+   * @param {string} message - Completion message
+   */
+  showComplete(message = 'Analysis complete') {
+    this.updateText(message);
+    this.showCheckmark();
+    this.stopDotsAnimation();
+    
+    // CRITICAL FIX: Automatically reload AI suggestions when background analysis completes
+    console.log('Background analysis completed, reloading AI suggestions...');
+    if (window.prManager && typeof window.prManager.loadAISuggestions === 'function') {
+      window.prManager.loadAISuggestions()
+        .then(() => {
+          console.log('AI suggestions reloaded successfully after background analysis');
+          // Auto-hide after suggestions have loaded successfully (shorter delay)
+          setTimeout(() => {
+            this.hide();
+          }, 3000);
+        })
+        .catch(error => {
+          console.error('Error reloading AI suggestions after background analysis:', error);
+          // Auto-hide with longer delay if loading failed
+          setTimeout(() => {
+            this.hide();
+          }, 7000);
+        });
+    } else {
+      console.warn('PRManager not available for automatic suggestion reload after background analysis');
+      // Auto-hide after 5 seconds if no PR manager available
+      setTimeout(() => {
+        this.hide();
+      }, 5000);
+    }
+  }
+
+  /**
+   * Show error state
+   * @param {string} message - Error message
+   */
+  showError(message = 'Analysis failed') {
+    this.updateText(message);
+    this.showErrorIcon();
+    this.stopDotsAnimation();
+    
+    // Auto-hide after 10 seconds
+    setTimeout(() => {
+      this.hide();
+    }, 10000);
+  }
+
+  /**
+   * Show spinner icon
+   */
+  showSpinner() {
+    const statusIcon = this.indicator?.querySelector('.status-icon');
+    if (statusIcon) {
+      statusIcon.innerHTML = `
+        <svg class="spinner" width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+          <path d="M8 0a8 8 0 0 0-8 8h2a6 6 0 0 1 6-6V0z"/>
+        </svg>
+      `;
+      statusIcon.className = 'status-icon spinning';
+    }
+  }
+
+  /**
+   * Show checkmark icon
+   */
+  showCheckmark() {
+    const statusIcon = this.indicator?.querySelector('.status-icon');
+    if (statusIcon) {
+      statusIcon.innerHTML = `
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" class="checkmark">
+          <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>
+        </svg>
+      `;
+      statusIcon.className = 'status-icon success';
+    }
+  }
+
+  /**
+   * Show error icon
+   */
+  showErrorIcon() {
+    const statusIcon = this.indicator?.querySelector('.status-icon');
+    if (statusIcon) {
+      statusIcon.innerHTML = `
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" class="error-icon">
+          <path d="M2.343 13.657A8 8 0 1113.657 2.343 8 8 0 012.343 13.657zM6.03 4.97a.75.75 0 00-1.06 1.06L6.94 8 4.97 9.97a.75.75 0 101.06 1.06L8 9.06l1.97 1.97a.75.75 0 101.06-1.06L9.06 8l1.97-1.97a.75.75 0 10-1.06-1.06L8 6.94 6.03 4.97z"/>
+        </svg>
+      `;
+      statusIcon.className = 'status-icon error';
+    }
+  }
+
+  /**
+   * Start animated dots
+   */
+  startDotsAnimation() {
+    this.stopDotsAnimation(); // Clear any existing interval
+    
+    this.dotsInterval = setInterval(() => {
+      const dotsElement = this.indicator?.querySelector('.status-dots');
+      if (!dotsElement) return;
+      
+      this.animationDots = (this.animationDots + 1) % 4;
+      dotsElement.textContent = '.'.repeat(this.animationDots);
+    }, 500);
+  }
+
+  /**
+   * Stop animated dots
+   */
+  stopDotsAnimation() {
+    if (this.dotsInterval) {
+      clearInterval(this.dotsInterval);
+      this.dotsInterval = null;
+    }
+    
+    const dotsElement = this.indicator?.querySelector('.status-dots');
+    if (dotsElement) {
+      dotsElement.textContent = '';
+    }
+  }
+
+  /**
+   * Reopen modal from status indicator
+   */
+  reopenModal() {
+    if (this.currentAnalysisId && window.progressModal) {
+      window.progressModal.reopenFromBackground();
+    }
+  }
+
+  /**
+   * Ensure indicator is properly positioned in header
+   */
+  repositionInHeader() {
+    // This method can be called after the header is re-rendered
+    // to ensure the indicator is in the correct position
+    const prActions = document.querySelector('.pr-actions');
+    const existingIndicator = document.getElementById('status-indicator');
+    
+    if (prActions && existingIndicator && !prActions.contains(existingIndicator)) {
+      // Move the indicator to the correct position
+      const firstButton = prActions.querySelector('button');
+      if (firstButton) {
+        prActions.insertBefore(existingIndicator, firstButton);
+      } else {
+        prActions.appendChild(existingIndicator);
+      }
+    }
+  }
+}
+
+// Initialize global instance
+window.statusIndicator = new StatusIndicator();