Bill/obsidian-mcp-server
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: extract inline styles from notification-history to CSS

Browse Source 
Moved 36 inline style assignments from notification-history.ts to CSS classes in styles.css following the mcp-* naming pattern. This improves maintainability and separates presentation from logic.

Changes:
- Created CSS classes for all static styles (mcp-history-filters, mcp-history-count, mcp-history-list, mcp-history-empty, mcp-history-entry, mcp-history-entry-header, mcp-history-entry-header-meta, mcp-history-entry-args, mcp-history-entry-error, mcp-history-actions)
- Created dynamic state classes for conditional styling (mcp-history-entry-border, mcp-history-entry-title-success, mcp-history-entry-title-error)
- Updated notification-history.ts to use CSS classes via addClass() instead of inline style assignments
- Retained only truly dynamic styles (borderBottom conditional, color conditional) as class toggles

All tests pass (716/716), build succeeds.
This commit is contained in:
Bill Ballou
2025-10-28 23:11:30 -04:00
parent 9c14ad8c1f
commit 6135f7c708
2 changed files with 91 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/ui/notification-history.ts
View File

@@ -50,7 +50,6 @@ export class NotificationHistoryModal extends Modal {
*/
private createFilters(containerEl: HTMLElement): void {
const filterContainer = containerEl.createDiv({ cls: 'mcp-history-filters' });
filterContainer.style.marginBottom = '16px';
// Tool name filter using Setting component
new Setting(filterContainer)
@@ -80,9 +79,6 @@ export class NotificationHistoryModal extends Modal {
// Results count
this.countEl = filterContainer.createDiv({ cls: 'mcp-history-count' });
this.countEl.style.marginTop = '8px';
this.countEl.style.fontSize = '0.9em';
this.countEl.style.color = 'var(--text-muted)';
this.updateResultsCount();
}
@@ -91,11 +87,6 @@ export class NotificationHistoryModal extends Modal {
*/
private createHistoryListContainer(containerEl: HTMLElement): void {
this.listContainerEl = containerEl.createDiv({ cls: 'mcp-history-list' });
this.listContainerEl.style.maxHeight = '400px';
this.listContainerEl.style.overflowY = 'auto';
this.listContainerEl.style.marginBottom = '16px';
this.listContainerEl.style.border = '1px solid var(--background-modifier-border)';
this.listContainerEl.style.borderRadius = '4px';
// Initial render
this.updateHistoryList();
@@ -112,36 +103,31 @@ export class NotificationHistoryModal extends Modal {
if (this.filteredHistory.length === 0) {
const emptyEl = this.listContainerEl.createDiv({ cls: 'mcp-history-empty' });
emptyEl.style.padding = '24px';
emptyEl.style.textAlign = 'center';
emptyEl.style.color = 'var(--text-muted)';
emptyEl.textContent = 'No entries found';
return;
}
this.filteredHistory.forEach((entry, index) => {
const entryEl = this.listContainerEl!.createDiv({ cls: 'mcp-history-entry' });
entryEl.style.padding = '12px';
entryEl.style.borderBottom = index < this.filteredHistory.length - 1
? '1px solid var(--background-modifier-border)'
: 'none';
// Add border class to all entries except the last one
if (index < this.filteredHistory.length - 1) {
entryEl.addClass('mcp-history-entry-border');
}
// Header row
const headerEl = entryEl.createDiv({ cls: 'mcp-history-entry-header' });
headerEl.style.display = 'flex';
headerEl.style.justifyContent = 'space-between';
headerEl.style.marginBottom = '8px';
// Tool name and status
const titleEl = headerEl.createDiv();
const statusIcon = entry.success ? '✅' : '❌';
const toolName = titleEl.createEl('strong', { text: `${statusIcon} ${entry.toolName}` });
toolName.style.color = entry.success ? 'var(--text-success)' : 'var(--text-error)';
// Add dynamic color class based on success/error
toolName.addClass(entry.success ? 'mcp-history-entry-title-success' : 'mcp-history-entry-title-error');
// Timestamp and duration
const metaEl = headerEl.createDiv();
metaEl.style.fontSize = '0.85em';
metaEl.style.color = 'var(--text-muted)';
const metaEl = headerEl.createDiv({ cls: 'mcp-history-entry-header-meta' });
const timestamp = new Date(entry.timestamp).toLocaleTimeString();
const durationStr = entry.duration ? ` • ${entry.duration}ms` : '';
metaEl.textContent = `${timestamp}${durationStr}`;
@@ -149,25 +135,12 @@ export class NotificationHistoryModal extends Modal {
// Arguments
if (entry.args && Object.keys(entry.args).length > 0) {
const argsEl = entryEl.createDiv({ cls: 'mcp-history-entry-args' });
argsEl.style.fontSize = '0.85em';
argsEl.style.fontFamily = 'monospace';
argsEl.style.backgroundColor = 'var(--background-secondary)';
argsEl.style.padding = '8px';
argsEl.style.borderRadius = '4px';
argsEl.style.marginBottom = '8px';
argsEl.style.overflowX = 'auto';
argsEl.textContent = JSON.stringify(entry.args, null, 2);
}
// Error message
if (!entry.success && entry.error) {
const errorEl = entryEl.createDiv({ cls: 'mcp-history-entry-error' });
errorEl.style.fontSize = '0.85em';
errorEl.style.color = 'var(--text-error)';
errorEl.style.backgroundColor = 'var(--background-secondary)';
errorEl.style.padding = '8px';
errorEl.style.borderRadius = '4px';
errorEl.style.fontFamily = 'monospace';
errorEl.textContent = entry.error;
}
});
@@ -186,9 +159,6 @@ export class NotificationHistoryModal extends Modal {
*/
private createActions(containerEl: HTMLElement): void {
const actionsContainer = containerEl.createDiv({ cls: 'mcp-history-actions' });
actionsContainer.style.display = 'flex';
actionsContainer.style.gap = '8px';
actionsContainer.style.justifyContent = 'flex-end';
// Export button
const exportButton = actionsContainer.createEl('button', { text: 'Export to Clipboard' });