feat: implement dynamic tab content with client-specific configs

This commit is contained in:
2025-10-26 11:07:11 -04:00
parent 4c4d8085fe
commit c1c00b4407

View File

@@ -291,31 +291,39 @@ export class MCPServerSettingTab extends PluginSettingTab {
this.display(); this.display();
}); });
// Generate JSON config (auth always included) // Get configuration for active tab
const mcpConfig = { const {filePath, config, usageNote} = this.generateConfigForClient(this.activeConfigTab);
"mcpServers": {
"obsidian-mcp": {
"serverUrl": `http://127.0.0.1:${this.plugin.settings.port}/mcp`,
"headers": {
"Authorization": `Bearer ${this.plugin.settings.apiKey || 'YOUR_API_KEY_HERE'}`
}
}
}
};
// Config display with copy button // Tab content area
const configButtonContainer = configContainer.createDiv(); const tabContent = configContainer.createDiv({cls: 'mcp-config-content'});
configButtonContainer.style.display = 'flex'; tabContent.style.marginTop = '16px';
configButtonContainer.style.gap = '8px';
configButtonContainer.style.marginBottom = '8px';
const copyConfigButton = configButtonContainer.createEl('button', {text: '📋 Copy Configuration'}); // File location label
const fileLocationLabel = tabContent.createEl('p', {text: 'Configuration file location:'});
fileLocationLabel.style.marginBottom = '4px';
fileLocationLabel.style.fontSize = '0.9em';
fileLocationLabel.style.color = 'var(--text-muted)';
// File path display
const filePathDisplay = tabContent.createEl('div', {text: filePath});
filePathDisplay.style.padding = '8px';
filePathDisplay.style.backgroundColor = 'var(--background-secondary)';
filePathDisplay.style.borderRadius = '4px';
filePathDisplay.style.fontFamily = 'monospace';
filePathDisplay.style.fontSize = '0.9em';
filePathDisplay.style.marginBottom = '12px';
filePathDisplay.style.color = 'var(--text-muted)';
// Copy button
const copyConfigButton = tabContent.createEl('button', {text: '📋 Copy Configuration'});
copyConfigButton.style.marginBottom = '12px';
copyConfigButton.addEventListener('click', async () => { copyConfigButton.addEventListener('click', async () => {
await navigator.clipboard.writeText(JSON.stringify(mcpConfig, null, 2)); await navigator.clipboard.writeText(JSON.stringify(config, null, 2));
new Notice('✅ Configuration copied to clipboard'); new Notice('✅ Configuration copied to clipboard');
}); });
const configDisplay = configContainer.createEl('pre'); // Config JSON display
const configDisplay = tabContent.createEl('pre');
configDisplay.style.padding = '12px'; configDisplay.style.padding = '12px';
configDisplay.style.backgroundColor = 'var(--background-secondary)'; configDisplay.style.backgroundColor = 'var(--background-secondary)';
configDisplay.style.borderRadius = '4px'; configDisplay.style.borderRadius = '4px';
@@ -323,7 +331,14 @@ export class MCPServerSettingTab extends PluginSettingTab {
configDisplay.style.overflowX = 'auto'; configDisplay.style.overflowX = 'auto';
configDisplay.style.userSelect = 'text'; configDisplay.style.userSelect = 'text';
configDisplay.style.cursor = 'text'; configDisplay.style.cursor = 'text';
configDisplay.textContent = JSON.stringify(mcpConfig, null, 2); configDisplay.style.marginBottom = '12px';
configDisplay.textContent = JSON.stringify(config, null, 2);
// Usage note
const usageNoteDisplay = tabContent.createEl('p', {text: usageNote});
usageNoteDisplay.style.fontSize = '0.9em';
usageNoteDisplay.style.color = 'var(--text-muted)';
usageNoteDisplay.style.fontStyle = 'italic';
// Notification Settings // Notification Settings
const notifDetails = containerEl.createEl('details'); const notifDetails = containerEl.createEl('details');