@rashidazarang/airtable-mcp 2.1.0 → 2.2.0

package/airtable-clipper/extension/popup.js

@@ -1,475 +0,0 @@
-// Airtable Clipper Popup Script
-import { AirtableClient, AirtableError } from './lib/airtable-client.js';
-
-class PopupController {
-  constructor() {
-    this.client = null;
-    this.currentTab = null;
-    this.settings = {};
-    this.init();
-  }
-
-  async init() {
-    // Get current tab
-    const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
-    this.currentTab = tabs[0];
-
-    // Load settings and initialize UI
-    await this.loadSettings();
-    this.initializeUI();
-    this.bindEvents();
-    
-    // Check connection status
-    await this.checkConnection();
-    
-    // Update UI based on current page
-    this.updateUIForCurrentPage();
-  }
-
-  async loadSettings() {
-    try {
-      const response = await chrome.runtime.sendMessage({
-        action: 'getSettings'
-      });
-
-      if (response.success) {
-        this.settings = response.settings;
-        this.populateSettingsUI();
-        
-        if (this.settings.airtableToken && this.settings.baseId) {
-          this.client = new AirtableClient(this.settings.airtableToken, this.settings.baseId);
-        }
-      }
-    } catch (error) {
-      console.error('Failed to load settings:', error);
-    }
-  }
-
-  populateSettingsUI() {
-    // Populate configuration form
-    const tokenInput = document.getElementById('airtableToken');
-    const baseIdInput = document.getElementById('baseId');
-    
-    if (tokenInput) tokenInput.value = this.settings.airtableToken || '';
-    if (baseIdInput) baseIdInput.value = this.settings.baseId || '';
-
-    // Populate settings
-    const defaultTableSelect = document.getElementById('defaultTable');
-    const linkedinTableSelect = document.getElementById('linkedinTable');
-    const autoSaveCheckbox = document.getElementById('autoSave');
-    const notificationsCheckbox = document.getElementById('notifications');
-
-    if (defaultTableSelect) defaultTableSelect.value = this.settings.defaultTable || 'Clips';
-    if (linkedinTableSelect) linkedinTableSelect.value = this.settings.linkedinTable || 'Contacts';
-    if (autoSaveCheckbox) autoSaveCheckbox.checked = this.settings.autoSave || false;
-    if (notificationsCheckbox) notificationsCheckbox.checked = this.settings.notifications !== false;
-  }
-
-  initializeUI() {
-    const isConnected = this.client !== null;
-    
-    // Show/hide sections based on connection status
-    document.getElementById('configuration').style.display = isConnected ? 'none' : 'block';
-    document.getElementById('quickActions').style.display = isConnected ? 'block' : 'none';
-    document.getElementById('settings').style.display = 'none'; // Hidden by default
-    
-    // Update connection status
-    this.updateConnectionStatus(isConnected);
-    
-    // Load usage stats if connected
-    if (isConnected) {
-      this.loadUsageStats();
-    }
-  }
-
-  bindEvents() {
-    // Configuration events
-    document.getElementById('connectBtn')?.addEventListener('click', () => this.handleConnect());
-    
-    // Quick action events
-    document.getElementById('quickSaveBtn')?.addEventListener('click', () => this.handleQuickSave());
-    document.getElementById('linkedinSaveBtn')?.addEventListener('click', () => this.handleLinkedInSave());
-    document.getElementById('bulkModeBtn')?.addEventListener('click', () => this.handleBulkMode());
-    
-    // Footer events
-    document.getElementById('settingsToggle')?.addEventListener('click', () => this.toggleSettings());
-    document.getElementById('helpBtn')?.addEventListener('click', () => this.openHelp());
-    document.getElementById('sidePanelBtn')?.addEventListener('click', () => this.openSidePanel());
-    
-    // Setup database button
-    document.getElementById('setupDatabaseBtn')?.addEventListener('click', () => this.openDatabaseSetup());
-    
-    // Settings events
-    document.getElementById('autoSave')?.addEventListener('change', () => this.saveSettings());
-    document.getElementById('notifications')?.addEventListener('change', () => this.saveSettings());
-    document.getElementById('defaultTable')?.addEventListener('change', () => this.saveSettings());
-    document.getElementById('linkedinTable')?.addEventListener('change', () => this.saveSettings());
-    
-    // Status message close
-    document.getElementById('statusClose')?.addEventListener('click', () => this.hideStatusMessage());
-  }
-
-  async handleConnect() {
-    const connectBtn = document.getElementById('connectBtn');
-    const connectText = document.getElementById('connectText');
-    const connectLoading = document.getElementById('connectLoading');
-    
-    const token = document.getElementById('airtableToken').value.trim();
-    const baseId = document.getElementById('baseId').value.trim();
-
-    if (!token || !baseId) {
-      this.showStatusMessage('Please enter both token and base ID', 'error');
-      return;
-    }
-
-    // Show loading state
-    connectBtn.disabled = true;
-    connectText.textContent = 'Connecting...';
-    connectLoading.style.display = 'inline';
-
-    try {
-      // Test connection
-      const testClient = new AirtableClient(token, baseId);
-      const result = await testClient.testConnection();
-
-      if (result.success) {
-        // Save settings
-        await this.saveSettings({ airtableToken: token, baseId: baseId });
-        
-        // Update client
-        this.client = testClient;
-        
-        // Load table options
-        await this.loadTableOptions();
-        
-        // Update UI
-        this.initializeUI();
-        this.showStatusMessage('Connected successfully!', 'success');
-      } else {
-        throw new Error(result.message);
-      }
-    } catch (error) {
-      console.error('Connection failed:', error);
-      this.showStatusMessage(`Connection failed: ${error.message}`, 'error');
-    } finally {
-      // Reset button state
-      connectBtn.disabled = false;
-      connectText.textContent = 'Connect to Airtable';
-      connectLoading.style.display = 'none';
-    }
-  }
-
-  async handleQuickSave() {
-    if (!this.client) return;
-
-    this.showLoading('Saving to Airtable...');
-
-    try {
-      // Send message to content script to extract page data
-      const response = await chrome.tabs.sendMessage(this.currentTab.id, {
-        action: 'extractPageData',
-        type: 'general'
-      });
-
-      if (response && response.success) {
-        // Save to Airtable via background script
-        const saveResponse = await chrome.runtime.sendMessage({
-          action: 'saveToAirtable',
-          data: {
-            type: 'general',
-            title: response.data.title,
-            url: response.data.url,
-            content: response.data.content,
-            timestamp: new Date().toISOString()
-          }
-        });
-
-        if (saveResponse.success) {
-          this.showStatusMessage('Saved to Airtable!', 'success');
-          this.updateUsageStats();
-        } else {
-          throw new Error(saveResponse.error);
-        }
-      } else {
-        // Fallback: save basic page info
-        await this.saveBasicPageInfo();
-      }
-    } catch (error) {
-      console.error('Quick save failed:', error);
-      this.showStatusMessage(`Save failed: ${error.message}`, 'error');
-    } finally {
-      this.hideLoading();
-    }
-  }
-
-  async handleLinkedInSave() {
-    if (!this.client) return;
-
-    this.showLoading('Extracting LinkedIn profile...');
-
-    try {
-      const response = await chrome.tabs.sendMessage(this.currentTab.id, {
-        action: 'extractLinkedInProfile'
-      });
-
-      if (response && response.success) {
-        const saveResponse = await chrome.runtime.sendMessage({
-          action: 'saveToAirtable',
-          data: {
-            type: 'linkedin',
-            ...response.data,
-            timestamp: new Date().toISOString()
-          }
-        });
-
-        if (saveResponse.success) {
-          this.showStatusMessage('LinkedIn profile saved!', 'success');
-          this.updateUsageStats();
-        } else {
-          throw new Error(saveResponse.error);
-        }
-      } else {
-        throw new Error('Failed to extract LinkedIn profile');
-      }
-    } catch (error) {
-      console.error('LinkedIn save failed:', error);
-      this.showStatusMessage(`LinkedIn save failed: ${error.message}`, 'error');
-    } finally {
-      this.hideLoading();
-    }
-  }
-
-  async handleBulkMode() {
-    try {
-      // Send message to content script to enter bulk mode
-      await chrome.tabs.sendMessage(this.currentTab.id, {
-        action: 'enterBulkMode'
-      });
-      
-      // Close popup
-      window.close();
-    } catch (error) {
-      console.error('Bulk mode failed:', error);
-      this.showStatusMessage('Bulk mode not available on this page', 'error');
-    }
-  }
-
-  async saveBasicPageInfo() {
-    const saveResponse = await chrome.runtime.sendMessage({
-      action: 'saveToAirtable',
-      data: {
-        type: 'general',
-        title: this.currentTab.title,
-        url: this.currentTab.url,
-        timestamp: new Date().toISOString()
-      }
-    });
-
-    if (saveResponse.success) {
-      this.showStatusMessage('Page saved to Airtable!', 'success');
-      this.updateUsageStats();
-    } else {
-      throw new Error(saveResponse.error);
-    }
-  }
-
-  async loadTableOptions() {
-    if (!this.client) return;
-
-    try {
-      const tables = await this.client.listTables();
-      
-      const defaultTableSelect = document.getElementById('defaultTable');
-      const linkedinTableSelect = document.getElementById('linkedinTable');
-
-      // Clear existing options
-      defaultTableSelect.innerHTML = '';
-      linkedinTableSelect.innerHTML = '';
-
-      // Add table options
-      tables.forEach(table => {
-        const option1 = new Option(table.name, table.name);
-        const option2 = new Option(table.name, table.name);
-        
-        defaultTableSelect.add(option1);
-        linkedinTableSelect.add(option2);
-      });
-
-      // Set current values
-      defaultTableSelect.value = this.settings.defaultTable || (tables.length > 0 ? tables[0].name : '');
-      linkedinTableSelect.value = this.settings.linkedinTable || 'Contacts';
-
-    } catch (error) {
-      console.error('Failed to load tables:', error);
-    }
-  }
-
-  async checkConnection() {
-    if (!this.client) return false;
-
-    try {
-      const result = await this.client.testConnection();
-      this.updateConnectionStatus(result.success);
-      return result.success;
-    } catch (error) {
-      this.updateConnectionStatus(false);
-      return false;
-    }
-  }
-
-  updateConnectionStatus(isConnected) {
-    const statusDot = document.querySelector('.status-dot');
-    const statusText = document.querySelector('.status-text');
-
-    if (isConnected) {
-      statusDot.className = 'status-dot connected';
-      statusText.textContent = 'Connected';
-    } else {
-      statusDot.className = 'status-dot disconnected';
-      statusText.textContent = 'Not Connected';
-    }
-  }
-
-  updateUIForCurrentPage() {
-    if (!this.currentTab) return;
-
-    const url = this.currentTab.url;
-    const quickSaveBtn = document.getElementById('quickSaveBtn');
-    const quickSaveSubtext = document.getElementById('quickSaveSubtext');
-    const linkedinSaveBtn = document.getElementById('linkedinSaveBtn');
-
-    // Update quick save button text based on current page
-    if (url.includes('linkedin.com/in/')) {
-      quickSaveSubtext.textContent = 'Save LinkedIn profile';
-      linkedinSaveBtn.style.display = 'block';
-    } else if (url.includes('github.com')) {
-      quickSaveSubtext.textContent = 'Save GitHub repository';
-    } else if (url.includes('twitter.com') || url.includes('x.com')) {
-      quickSaveSubtext.textContent = 'Save tweet';
-    } else {
-      quickSaveSubtext.textContent = 'Save this page';
-    }
-
-    // Hide LinkedIn button if not on LinkedIn
-    if (!url.includes('linkedin.com')) {
-      linkedinSaveBtn.style.display = 'none';
-    }
-  }
-
-  async saveSettings(newSettings = null) {
-    try {
-      const settingsToSave = newSettings || {
-        defaultTable: document.getElementById('defaultTable')?.value || this.settings.defaultTable,
-        linkedinTable: document.getElementById('linkedinTable')?.value || this.settings.linkedinTable,
-        autoSave: document.getElementById('autoSave')?.checked || this.settings.autoSave,
-        notifications: document.getElementById('notifications')?.checked !== false,
-        ...this.settings
-      };
-
-      if (newSettings) {
-        Object.assign(settingsToSave, newSettings);
-      }
-
-      const response = await chrome.runtime.sendMessage({
-        action: 'saveSettings',
-        settings: settingsToSave
-      });
-
-      if (response.success) {
-        this.settings = settingsToSave;
-      }
-    } catch (error) {
-      console.error('Failed to save settings:', error);
-    }
-  }
-
-  async loadUsageStats() {
-    try {
-      const result = await chrome.storage.local.get(['usageStats']);
-      const stats = result.usageStats || { weeklyClips: 0, totalClips: 0 };
-      
-      document.getElementById('weeklyClips').textContent = stats.weeklyClips;
-      document.getElementById('usageInfo').style.display = 'block';
-    } catch (error) {
-      console.error('Failed to load usage stats:', error);
-    }
-  }
-
-  async updateUsageStats() {
-    // Reload usage stats after saving
-    setTimeout(() => this.loadUsageStats(), 500);
-  }
-
-  toggleSettings() {
-    const settings = document.getElementById('settings');
-    const isVisible = settings.style.display !== 'none';
-    
-    settings.style.display = isVisible ? 'none' : 'block';
-    
-    const toggleBtn = document.getElementById('settingsToggle');
-    toggleBtn.textContent = isVisible ? 'Settings' : 'Hide Settings';
-  }
-
-  openHelp() {
-    chrome.tabs.create({
-      url: 'https://github.com/rashidazarang/airtable-clipper#readme'
-    });
-  }
-
-  async openSidePanel() {
-    try {
-      await chrome.runtime.sendMessage({
-        action: 'openSidePanel'
-      });
-      window.close();
-    } catch (error) {
-      console.error('Failed to open side panel:', error);
-    }
-  }
-
-  openDatabaseSetup() {
-    // Open the database setup wizard in a new window
-    chrome.tabs.create({
-      url: chrome.runtime.getURL('base-setup.html'),
-      active: true
-    });
-    window.close();
-  }
-
-  showStatusMessage(message, type = 'success') {
-    const statusMessage = document.getElementById('statusMessage');
-    const statusIcon = document.getElementById('statusIcon');
-    const statusText = document.getElementById('statusText');
-
-    statusIcon.textContent = type === 'success' ? '✅' : '❌';
-    statusText.textContent = message;
-    statusMessage.className = `status-message ${type}`;
-    statusMessage.style.display = 'block';
-
-    // Auto-hide after 3 seconds
-    setTimeout(() => this.hideStatusMessage(), 3000);
-  }
-
-  hideStatusMessage() {
-    const statusMessage = document.getElementById('statusMessage');
-    statusMessage.style.display = 'none';
-  }
-
-  showLoading(text = 'Processing...') {
-    const loadingOverlay = document.getElementById('loadingOverlay');
-    const loadingText = document.getElementById('loadingText');
-    
-    loadingText.textContent = text;
-    loadingOverlay.style.display = 'flex';
-  }
-
-  hideLoading() {
-    const loadingOverlay = document.getElementById('loadingOverlay');
-    loadingOverlay.style.display = 'none';
-  }
-}
-
-// Initialize popup when DOM is loaded
-document.addEventListener('DOMContentLoaded', () => {
-  new PopupController();
-});

package/airtable-clipper/extension/styles/content.css

@@ -1,229 +0,0 @@
-/* Airtable Clipper Content Script Styles */
-
-/* Floating Action Button */
-#airtable-clipper-fab {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
-#airtable-clipper-fab .fab-main {
-  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-#airtable-clipper-fab .fab-main:hover {
-  transform: scale(1.1) rotate(5deg);
-}
-
-#airtable-clipper-fab .fab-main:active {
-  transform: scale(0.95);
-}
-
-/* Selection Toolbar */
-#airtable-clipper-selection-toolbar {
-  animation: fadeInUp 0.2s ease;
-}
-
-#airtable-clipper-selection-toolbar .selection-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-/* Bulk Mode Overlay */
-#airtable-clipper-bulk-overlay {
-  animation: slideDown 0.3s ease;
-}
-
-#airtable-clipper-bulk-overlay .bulk-btn:hover {
-  background: rgba(255, 255, 255, 0.3);
-  transform: translateY(-1px);
-}
-
-/* Bulk Selection Highlights */
-.airtable-clipper-selected {
-  background: rgba(102, 126, 234, 0.1) !important;
-  border: 2px solid #667eea !important;
-  border-radius: 4px;
-  transition: all 0.2s ease;
-}
-
-.airtable-clipper-selectable:hover {
-  background: rgba(102, 126, 234, 0.05) !important;
-  cursor: pointer;
-}
-
-/* Notifications */
-#airtable-clipper-notification {
-  animation: slideInRight 0.3s ease;
-  backdrop-filter: blur(10px);
-}
-
-/* Animations */
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideDown {
-  from {
-    transform: translateY(-100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.7;
-  }
-}
-
-/* Loading States */
-.airtable-clipper-loading {
-  position: relative;
-  opacity: 0.7;
-}
-
-.airtable-clipper-loading::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 20px;
-  height: 20px;
-  margin: -10px 0 0 -10px;
-  border: 2px solid #667eea;
-  border-top: 2px solid transparent;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-/* Site-specific enhancements */
-
-/* LinkedIn */
-body[class*="linkedin"] .airtable-clipper-selected,
-[data-test-id*="search-result"] .airtable-clipper-selected {
-  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
-}
-
-/* GitHub */
-.repository-content .airtable-clipper-selected,
-.Box .airtable-clipper-selected {
-  border-radius: 6px;
-}
-
-/* Stack Overflow */
-.question-summary .airtable-clipper-selected,
-.answer .airtable-clipper-selected {
-  border-left: 4px solid #667eea;
-  padding-left: 8px;
-}
-
-/* Medium */
-article .airtable-clipper-selected {
-  border-radius: 8px;
-  padding: 8px;
-  margin: 4px 0;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  #airtable-clipper-fab {
-    bottom: 80px; /* Above mobile browser UI */
-    right: 16px;
-    z-index: 10000;
-  }
-  
-  #airtable-clipper-fab .fab-main {
-    width: 48px;
-    height: 48px;
-    font-size: 18px;
-  }
-  
-  #airtable-clipper-bulk-overlay {
-    font-size: 12px;
-    padding: 8px 12px;
-  }
-  
-  #airtable-clipper-bulk-overlay .bulk-header {
-    flex-direction: column;
-    gap: 8px;
-    align-items: flex-start;
-  }
-  
-  #airtable-clipper-bulk-overlay .bulk-actions {
-    display: flex;
-    gap: 8px;
-  }
-  
-  #airtable-clipper-notification {
-    top: 10px;
-    right: 10px;
-    left: 10px;
-    max-width: none;
-    font-size: 13px;
-  }
-}
-
-/* Dark Mode Support */
-@media (prefers-color-scheme: dark) {
-  .airtable-clipper-selected {
-    background: rgba(102, 126, 234, 0.2) !important;
-    border-color: #818cf8 !important;
-  }
-  
-  .airtable-clipper-selectable:hover {
-    background: rgba(102, 126, 234, 0.1) !important;
-  }
-}
-
-/* High Contrast Mode */
-@media (prefers-contrast: high) {
-  #airtable-clipper-fab .fab-main {
-    border: 2px solid #000;
-  }
-  
-  .airtable-clipper-selected {
-    border-width: 3px !important;
-    background: rgba(102, 126, 234, 0.3) !important;
-  }
-}
-
-/* Reduced Motion */
-@media (prefers-reduced-motion: reduce) {
-  #airtable-clipper-fab .fab-main,
-  #airtable-clipper-notification,
-  #airtable-clipper-selection-toolbar,
-  #airtable-clipper-bulk-overlay,
-  .airtable-clipper-selected {
-    animation: none !important;
-    transition: none !important;
-  }
-  
-  #airtable-clipper-fab .fab-main:hover {
-    transform: none !important;
-  }
-}