mcp-config-manager 1.0.13 → 2.1.1

package/public/js/modals.js

@@ -3,17 +3,284 @@ import {
     addServerApi, updateServerApi, deleteServerApi, copyServerApi,
     exportConfigApi, exportServerApi, importConfigApi, getClientConfigApi, renameServerApi, updateServerEnvApi, updateServerInClientsApi
 } from './api.js';
+import { getIconPreference, setIconPreference, removeIconPreference } from './iconPreferences.js';
+import { getServerLogo, getLogoByDomain, clearLogoCache, getInitials } from './logoService.js';
 
 let clients = []; // This will be passed from main.js
 let currentClient = null; // This will be passed from main.js
 let loadClientsCallback = null; // Callback to main.js to reload all clients
 
+// Icon editor state
+let currentIconType = 'auto';
+let currentIconValue = null;
+let selectedSearchDomain = null;
+
 export function initModals(clientData, currentClientData, loadClientsFn) {
     clients = clientData;
     currentClient = currentClientData;
     loadClientsCallback = loadClientsFn;
 }
 
+// Popular services for icon search suggestions
+const POPULAR_SERVICES = [
+    { domain: 'github.com', name: 'GitHub' },
+    { domain: 'gitlab.com', name: 'GitLab' },
+    { domain: 'slack.com', name: 'Slack' },
+    { domain: 'notion.so', name: 'Notion' },
+    { domain: 'linear.app', name: 'Linear' },
+    { domain: 'figma.com', name: 'Figma' },
+    { domain: 'stripe.com', name: 'Stripe' },
+    { domain: 'openai.com', name: 'OpenAI' },
+    { domain: 'anthropic.com', name: 'Anthropic' },
+    { domain: 'vercel.com', name: 'Vercel' },
+    { domain: 'supabase.com', name: 'Supabase' },
+    { domain: 'postgresql.org', name: 'PostgreSQL' },
+];
+
+/**
+ * Initialize icon editor with current server's icon preference
+ * Now uses simplified inline UI with just icon preview + pencil edit button
+ */
+async function initIconEditor(serverName, serverConfig) {
+    // Reset state
+    currentIconType = 'auto';
+    currentIconValue = null;
+    selectedSearchDomain = null;
+
+    // Load current preference
+    if (serverName) {
+        const pref = getIconPreference(serverName);
+        if (pref) {
+            currentIconType = pref.type;
+            currentIconValue = pref.value;
+            if (pref.type === 'logodev') {
+                selectedSearchDomain = pref.value;
+            }
+        }
+    }
+
+    // Update mini preview
+    await updateIconPreviewMini(serverName, serverConfig);
+
+    // Setup click handler for the edit trigger
+    const iconEditTrigger = document.getElementById('iconEditTrigger');
+    if (iconEditTrigger) {
+        iconEditTrigger.onclick = () => {
+            showIconSearchModal(serverName, serverConfig);
+        };
+    }
+}
+
+/**
+ * Update the mini icon preview in the server name row
+ */
+async function updateIconPreviewMini(serverName, serverConfig) {
+    const previewContainer = document.getElementById('iconPreviewMini');
+    if (!previewContainer) return;
+
+    const initials = getInitials(serverName || 'New');
+    let logoUrl = null;
+
+    if (currentIconType === 'none') {
+        // Show initials only
+        previewContainer.innerHTML = `<div class="server-logo-fallback">${initials}</div>`;
+        return;
+    }
+
+    if (currentIconType === 'url' && currentIconValue) {
+        logoUrl = currentIconValue;
+    } else if (currentIconType === 'logodev' && currentIconValue) {
+        logoUrl = getLogoByDomain(currentIconValue);
+    } else if (currentIconType === 'auto') {
+        // Use auto-detection (skip custom prefs since we're in edit mode)
+        if (serverName) {
+            logoUrl = await getServerLogo(serverName, serverConfig, true);
+        }
+    }
+
+    if (logoUrl) {
+        previewContainer.innerHTML = `
+            <img src="${logoUrl}" alt="${serverName || 'icon'}"
+                 onerror="this.parentElement.innerHTML='<div class=\\'server-logo-fallback\\'>${initials}</div>'">
+        `;
+    } else {
+        previewContainer.innerHTML = `<div class="server-logo-fallback">${initials}</div>`;
+    }
+}
+
+/**
+ * Show icon search modal with options for auto, search, URL, and none
+ */
+function showIconSearchModal(serverName, serverConfig) {
+    const modal = document.getElementById('iconSearchModal');
+    const searchInput = document.getElementById('iconSearchInput');
+    const resultsDiv = document.getElementById('iconSearchResults');
+    const suggestionsGrid = document.getElementById('suggestionsGrid');
+    const confirmBtn = document.getElementById('confirmIconSearch');
+    const cancelBtn = document.getElementById('cancelIconSearch');
+
+    // Track temporary selection state
+    let tempType = currentIconType;
+    let tempValue = currentIconValue;
+    let tempSelectedDomain = selectedSearchDomain;
+
+    // Reset search
+    searchInput.value = '';
+
+    // Build initial results with quick action buttons
+    function renderQuickActions() {
+        const autoSelected = tempType === 'auto';
+        const noneSelected = tempType === 'none';
+
+        let html = `
+            <div class="icon-quick-actions">
+                <button type="button" class="icon-quick-btn ${autoSelected ? 'selected' : ''}" data-action="auto">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <path d="M12 6v6l4 2"></path>
+                    </svg>
+                    Auto detect
+                </button>
+                <button type="button" class="icon-quick-btn ${noneSelected ? 'selected' : ''}" data-action="none">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="10"></circle>
+                        <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line>
+                    </svg>
+                    No icon
+                </button>
+            </div>
+        `;
+
+        // Show currently selected logo if any
+        if (tempType === 'logodev' && tempSelectedDomain) {
+            html += renderSearchResultHtml(tempSelectedDomain, true);
+        } else if (tempType === 'url' && tempValue) {
+            html += `
+                <div class="icon-search-result selected">
+                    <img src="${tempValue}" alt="custom" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><rect fill=%22%23e2e8f0%22 width=%2240%22 height=%2240%22/><text x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 fill=%22%2364748b%22 font-size=%2214%22>?</text></svg>'">
+                    <div class="icon-search-result-info">
+                        <div class="icon-search-result-domain">Custom URL</div>
+                        <div class="icon-search-result-url">${tempValue}</div>
+                    </div>
+                </div>
+            `;
+        } else if (!autoSelected && !noneSelected) {
+            html += '<div class="icon-search-hint">Search for a logo or enter a custom URL</div>';
+        }
+
+        return html;
+    }
+
+    function renderSearchResultHtml(domain, selected = false) {
+        const logoUrl = getLogoByDomain(domain, { size: 64 });
+        return `
+            <div class="icon-search-result ${selected ? 'selected' : ''}">
+                <img src="${logoUrl}" alt="${domain}" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 40%22><rect fill=%22%23e2e8f0%22 width=%2240%22 height=%2240%22/><text x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 fill=%22%2364748b%22 font-size=%2214%22>?</text></svg>'">
+                <div class="icon-search-result-info">
+                    <div class="icon-search-result-domain">${domain}</div>
+                    <div class="icon-search-result-url">Logo from logo.dev</div>
+                </div>
+            </div>
+        `;
+    }
+
+    resultsDiv.innerHTML = renderQuickActions();
+    confirmBtn.disabled = false; // Always allow confirm since auto is valid
+
+    // Quick action button handlers
+    resultsDiv.addEventListener('click', (e) => {
+        const btn = e.target.closest('.icon-quick-btn');
+        if (btn) {
+            const action = btn.dataset.action;
+            if (action === 'auto') {
+                tempType = 'auto';
+                tempValue = null;
+                tempSelectedDomain = null;
+            } else if (action === 'none') {
+                tempType = 'none';
+                tempValue = null;
+                tempSelectedDomain = null;
+            }
+            resultsDiv.innerHTML = renderQuickActions();
+        }
+    });
+
+    // Populate suggestions
+    suggestionsGrid.innerHTML = '';
+    POPULAR_SERVICES.forEach(service => {
+        const chip = document.createElement('div');
+        chip.className = 'suggestion-chip';
+        chip.innerHTML = `
+            <img src="${getLogoByDomain(service.domain, { size: 32 })}" alt="${service.name}" onerror="this.style.display='none'">
+            <span>${service.name}</span>
+        `;
+        chip.onclick = () => {
+            tempType = 'logodev';
+            tempSelectedDomain = service.domain;
+            tempValue = service.domain;
+            resultsDiv.innerHTML = renderQuickActions();
+        };
+        suggestionsGrid.appendChild(chip);
+    });
+
+    // Search input handler - supports domain search and custom URL
+    searchInput.onkeydown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            const query = searchInput.value.trim();
+            if (query) {
+                // Check if it's a full URL
+                if (query.startsWith('http://') || query.startsWith('https://')) {
+                    tempType = 'url';
+                    tempValue = query;
+                    tempSelectedDomain = null;
+                } else {
+                    // Treat as domain
+                    let domain = query.toLowerCase();
+                    if (!domain.includes('.')) {
+                        domain = `${domain}.com`;
+                    }
+                    tempType = 'logodev';
+                    tempSelectedDomain = domain;
+                    tempValue = domain;
+                }
+                resultsDiv.innerHTML = renderQuickActions();
+            }
+        }
+    };
+
+    // Confirm selection
+    confirmBtn.onclick = () => {
+        currentIconType = tempType;
+        currentIconValue = tempValue;
+        selectedSearchDomain = tempSelectedDomain;
+        modal.style.display = 'none';
+        updateIconPreviewMini(serverName, serverConfig);
+    };
+
+    // Cancel
+    cancelBtn.onclick = () => {
+        modal.style.display = 'none';
+    };
+
+    modal.style.display = 'flex';
+    searchInput.focus();
+}
+
+
+/**
+ * Save icon preference for a server (called after server is saved)
+ */
+function saveIconPreference(serverName) {
+    if (currentIconType === 'auto') {
+        removeIconPreference(serverName);
+    } else {
+        setIconPreference(serverName, currentIconType, currentIconValue);
+    }
+    // Clear cache so new preference takes effect
+    clearLogoCache(serverName);
+}
+
 export function showServerModal(serverName = null, serverConfig = null, loadClientServers, renderKanbanBoard, clientId = null, loadClientsFn) {
     const modal = document.getElementById('serverModal');
     const title = document.getElementById('modalTitle');
@@ -45,13 +312,11 @@ export function showServerModal(serverName = null, serverConfig = null, loadClie
 
     // Set JSON editor content
     if (!serverName && !serverConfig) {
-        // For new servers, show the expected format
+        // For new servers, show the expected config format (server name comes from form field)
         document.getElementById('jsonEditor').value = JSON.stringify({
-            "new-server": {
-                "command": "npx",
-                "args": ["-y", "@example/mcp-server"],
-                "env": {}
-            }
+            "command": "npx",
+            "args": ["-y", "@example/mcp-server"],
+            "env": {}
         }, null, 2);
     } else {
         document.getElementById('jsonEditor').value = JSON.stringify(serverConfig || {}, null, 2);
@@ -94,6 +359,9 @@ export function showServerModal(serverName = null, serverConfig = null, loadClie
         btn.onclick = () => switchTab(btn.dataset.tab);
     });
 
+    // Initialize icon editor
+    initIconEditor(serverName, serverConfig);
+
     modal.style.display = 'flex';
     document.getElementById('serverName').focus();
 
@@ -128,28 +396,35 @@ async function saveServer(originalName, loadClientServers, renderKanbanBoard, lo
         try {
             const jsonData = JSON.parse(document.getElementById('jsonEditor').value);
 
+            // Server name always comes from the form field
+            newServerName = document.getElementById('serverName').value;
+            if (!newServerName) {
+                alert('Server name cannot be empty. Please enter a name in the Server Name field.');
+                return;
+            }
+
             // Check if this is a new server (originalName is null)
             if (!originalName) {
-                // For new servers in JSON mode, expect format: { "serverName": { config } }
+                // For new servers, JSON should be just the config (not wrapped)
+                // But also support legacy wrapped format { "serverName": { config } } for backwards compatibility
                 const keys = Object.keys(jsonData);
                 if (keys.length === 0) {
-                    alert('Server configuration cannot be empty. Use format: { "serverName": { "command": "...", "args": [...] } }');
+                    alert('Server configuration cannot be empty.');
                     return;
                 }
-                if (keys.length > 1) {
-                    alert('Only one server can be added at a time. Use format: { "serverName": { "command": "...", "args": [...] } }');
-                    return;
+
+                // Check if this looks like a wrapped format (single key with object value containing command/args/env)
+                if (keys.length === 1 && typeof jsonData[keys[0]] === 'object' &&
+                    (jsonData[keys[0]].command || jsonData[keys[0]].args || jsonData[keys[0]].env || jsonData[keys[0]].type)) {
+                    // Legacy wrapped format - use the inner config
+                    serverConfig = jsonData[keys[0]];
+                } else {
+                    // New unwrapped format - use JSON directly as config
+                    serverConfig = jsonData;
                 }
-                newServerName = keys[0];
-                serverConfig = jsonData[newServerName];
             } else {
-                // For editing existing servers, use the name from the input field
+                // For editing existing servers, use the JSON directly as config
                 serverConfig = jsonData;
-                newServerName = document.getElementById('serverName').value;
-                if (!newServerName) {
-                    alert('Server name cannot be empty.');
-                    return;
-                }
             }
         } catch (e) {
             alert('Invalid JSON format');
@@ -231,6 +506,9 @@ async function saveServer(originalName, loadClientServers, renderKanbanBoard, lo
             if (!renameResponse.success) {
                 throw new Error('Failed to rename server');
             }
+            // Migrate icon preference if server was renamed
+            const { migrateIconPreference } = await import('./iconPreferences.js');
+            migrateIconPreference(originalName, newServerName);
         } catch (error) {
             alert('Failed to rename server: ' + error.message);
             return;
@@ -253,6 +531,9 @@ async function saveServer(originalName, loadClientServers, renderKanbanBoard, lo
             throw new Error(`Failed to save server`);
         }
 
+        // Save icon preference
+        saveIconPreference(serverToSaveName);
+
         document.getElementById('serverModal').style.display = 'none';
         await loadClientServers();
         if (renderKanbanBoard) {
@@ -504,10 +785,7 @@ export async function deleteSelected(loadClientServers, renderKanbanBoard, loadC
 }
 
 export async function removeFromAll(serverName, loadClients, loadClientServers, loadClientsFn) {
-    if (!confirm(`Are you sure you want to remove "${serverName}" from ALL clients?`)) {
-        return;
-    }
-
+    // Note: Confirmation should be handled by the caller before calling this function
     let removedCount = 0;
     const errors = [];
 
@@ -533,11 +811,16 @@ export async function removeFromAll(serverName, loadClients, loadClientServers,
 
     if (errors.length > 0) {
         alert(`Removed "${serverName}" from ${removedCount} client(s).\nFailed for: ${errors.join(', ')}`);
+    } else if (removedCount === 0) {
+        alert(`Server "${serverName}" was not found in any clients.`);
     } else {
+        alert(`Successfully removed "${serverName}" from ${removedCount} client(s).`);
     }
 
     loadClientsFn();
-    await loadClientServers();
+    if (loadClientServers) {
+        await loadClientServers();
+    }
 }
 
 export const showAddServerToClientsModal = (serverName, serverConfig) => {
@@ -754,6 +1037,43 @@ export const showCopySingleEnvVarModal = async (serverName, envKey, envValue, so
 };
 
 
+export function showSelectClientModal(onClientSelected, loadClientsFn) {
+    const modal = document.getElementById('selectClientModal');
+    const selectClientList = document.getElementById('selectClientList');
+
+    // Populate client list as radio buttons (single selection)
+    selectClientList.innerHTML = '';
+    clients.forEach((client, index) => {
+        const item = document.createElement('div');
+        item.className = 'radio-item';
+        item.innerHTML = `
+            <input type="radio" name="selectedClient" id="selectClient-${client.id}" value="${client.id}" ${index === 0 ? 'checked' : ''}>
+            <label for="selectClient-${client.id}">${client.name}</label>
+        `;
+        selectClientList.appendChild(item);
+    });
+
+    modal.style.display = 'flex';
+
+    const form = document.getElementById('selectClientForm');
+    form.onsubmit = (e) => {
+        e.preventDefault();
+        const selectedRadio = document.querySelector('input[name="selectedClient"]:checked');
+        if (!selectedRadio) {
+            alert('Please select a client.');
+            return;
+        }
+        const selectedClientId = selectedRadio.value;
+        modal.style.display = 'none';
+        onClientSelected(selectedClientId);
+    };
+
+    // Setup cancel button
+    document.getElementById('cancelSelectClient').onclick = () => {
+        modal.style.display = 'none';
+    };
+}
+
 export function showRemoteServerModal(loadClientServers, renderKanbanBoard, clientId = null, loadClientsFn) {
     const modal = document.getElementById('remoteServerModal');